How to solve setState problem in react?

Question

JavaScript

there are two components, a button and a block, the default state of the block is false, when the button is clicked, the state should change, but this does not happen, an error pops up

×
TypeError: setState is not a function
onClick
C:/todoTest/todo-app/src/components/list-button/List-button.jsx:7
   4 | 
   5 | const ListButton = ({items,setState}) => {
   6 | 
>  7 |   return  <button onClick={() => setState(true)}  className="todo-header-plus" title="Создать список дел">
   8 |     {
   9 |       items.map((item,index) => (
  10 |         <i key={index}>{item.icon}</i>
View compiled
▶ 22 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

I can't figure out why this is happening, please help!
here are two components

import React from 'react';
import './List-button.scss';


const ListButton = ({items,setState}) => {

  return  <button onClick={() => setState(true)}  className="todo-header-plus" title="Создать список дел">
    {
      items.map((item,index) => (
        <i key={index}>{item.icon}</i>
      ))
    }
  </button>
}


export default ListButton;

import React, {useState} from 'react';
import './List-popup.scss';



const AddList = () => {
  const [state, setState] = useState(false);
  return state && (<div className="list-popup">
    <h1>123</h1>
  </div>)

}

export default AddList;

Answer 1

Maybe you should use bind?