вот компонент который хочу показать
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... подскажите где ошибка