Как решить проблему setState в react?

Question

[Максим js]

есть два компонента, кнопка и блок, блоку указано состояние по умолчанию false, при клике по кнопке состояние должно измениться, но этого не происходит вылазит ошибка

×
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.

не могу понять почему так происходит, помогите!
вот два компонента

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;

Comments

[Роман Александрович]

Не вижу что бы вы в addList вызывали компонент listButton

[Максим js]

Роман Александрович,

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

}

так?

[Игорь]

Максим js, Простите, а как эти компоненты связаны вообще? я так полагаю ListButton должен использоваться внутри AddList.

[Максим js]

loonny,

import React from 'react';
import{ FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import ListTitle from './components/list/List-title';
import ListItem from './components/list-item/List-item';
import ListButton from './components/list-button/List-button';
import AddList from './components/list-popup/List-popup';
import{ faPlusSquare } from '@fortawesome/free-solid-svg-icons';
import{ faClipboardList } from '@fortawesome/free-solid-svg-icons';
import{ faHome } from '@fortawesome/free-solid-svg-icons';
import{ faBriefcase } from '@fortawesome/free-solid-svg-icons';
import{ faPhone } from '@fortawesome/free-solid-svg-icons';
import{ faUtensils } from '@fortawesome/free-solid-svg-icons';
import{ faShoppingCart } from '@fortawesome/free-solid-svg-icons';
import{ faMoneyCheckAlt} from '@fortawesome/free-solid-svg-icons';

function App() {

  return <div className="todo">
      <header className="todo-header">
        <ListButton items={[
          {
            icon: <FontAwesomeIcon icon={faPlusSquare}/>
          }
        ]}
        />
        <input className="todo-header-input" type="text" placeholder="..." maxLength="35"/>
        <button className="todo-header-button">Выход</button>
      </header>
      <main className="todo-content">
        <div className="todo-sidebar">
          <AddList/>
          <ListTitle items={[
            {
              icon: <FontAwesomeIcon icon={faClipboardList}/>,
              name: 'Все задачи'
            }
          ]}
          isRemovable
          />
          <ListItem items={[
            {
              icon: <FontAwesomeIcon icon={faHome}/>,
              name: 'Дом',
              color: 'home'
            },
            {
              icon: <FontAwesomeIcon icon={faBriefcase}/>,
              name: 'Работа',
              color:'work'
            },
            {
              icon: <FontAwesomeIcon icon={faPhone}/>,
              name: 'Звонки',
              color:'phone'
            },
            {
              icon: <FontAwesomeIcon icon={faUtensils}/>,
              name: 'Еда',
              color:'food'
            },
            {
              icon: <FontAwesomeIcon icon={faShoppingCart}/>,
              name: 'Покупки',
              color:'shop'
            },
            {
              icon: <FontAwesomeIcon icon={faMoneyCheckAlt}/>,
              name: 'Финансы',
              color:'money'
            }
          ]}/>
        </div>
        <div className="todo-tasks">

        </div>
      </main>
    </div>//end todo
}

export default App;

[Игорь]

Максим js, Ну так ничего ж не изменилось. В ListButton нет метода setState

[Максим js]

loonny, как добавить?)

[Игорь]

Максим js, так же как вы добавляли в компонент AddList

const [state, setState] = useState(false);

Answer 1

[Игорь]

Может стоит использовать bind?

Comments

[Максим js]

Можно подробнее пожалуйста

[Игорь]

Максим js, Я не понимаю как эти 2 компонента связаны. По сути логично что вам выходит эта ошибка, ведь в ListButton нет метода setState.

[Игорь]

Максим js, у вас в компоненте ListButton метода setState нету, я подумал что это метод родительского компонента. Методы родительского компонента передаются через пропсы, с предварительной привязкой this этого самого родительского компонента.

[Максим js]

loonny, после добавления в ListButton метода setState при клике вообще ничего не происходит.

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

можете кодом объяснить как это должно работать?
вроде ничего сложного нужно при клике на кнопку показать блок, а уже 3 день не могу найти ответ какого фига вылазит ошибка.

[Игорь]

Максим js, происходит то, что и должно происходить. Вы объявили метод, но что делать дальше? В AddList у вас была проверка типа state && ( ), Добавьте ее сюда, и все заработает

[Игорь]

Максим js, хотя стойте, я не понял что вы хотите. Вы хотите что бы по нажатию кнопки в одном компоненте менялся другой компонент?
Тогда вам нужно либо поднять состояние до ближайшего общего родительского компонента, либо использовать контекст

[Максим js]

loonny, кнопка это и есть компонент, при клике по которому хочу изменить состояние другого компонента, но выдает ошибку.

[Максим js]

loonny, подскажите как поднять состояние?

[Игорь]

Максим js, Лучше дам ссылку на доки, там понятно все описано. Я лучше объяснить точно не смогу.
Подъём состояния - ReactJS