0

вот компонент который хочу показать

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

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

}

export default AddList;

вот по которому кликнуть для показа, но вылазиет ошибка, TypeError: setState is not a function

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 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
        onClick={() => setState(true)}
      />
      <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;

почему-то кнопка не видит состояние state... подскажите где ошибка

1
  • Выкладывайте код в js песочницах. Спасибо
    – Ceri
    3 мая 2020 в 15:06

1 ответ 1

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

В ListButton ты не передал setState

<ListButton items={[
      {
        icon: <FontAwesomeIcon icon={faPlusSquare}/>
      }
    ]}
    />
3
  • а куда там его передать, что-то не понял?
    – Maxim
    3 мая 2020 в 14:39
  • <ListButton items={[ ]} setState={setState} /> // Как-то так должно быть
    – santavital
    3 мая 2020 в 14:44
  • 'setState' is not defined no-undef не помогло(
    – Maxim
    3 мая 2020 в 14:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.