03
Май
2020

Как по клику одного компонента показать другой компонент React?

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

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... подскажите где ошибка

Источник: https://ru.stackoverflow.com/questions/1119669/%D0%9A%D0%B0%D0%BA-%D0%BF%D0%BE-%D0%BA%D0%BB%D0%B8%D0%BA%D1%83-%D0%BE%D0%B4%D0%BD%D0%BE%D0%B3%D0%BE-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0-%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C-%D0%B4%D1%80%D1%83%D0%B3%D0%BE%D0%B9-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-react

Тебе может это понравится...

Добавить комментарий