Как передать данные значений button в список React.js

Question

Пытаюсь сделать SPA на React, принцип которого заключается в том, чтобы значения кнопок передавались в отдельный список. То есть у нас есть <button onClick={handleAddTask}>Заработать на машину!</button>, <button onClick={handleAddTask}>Войти в IT!</button>, <button onClick={handleAddTask}>Получить премию</button> и если мы нажимаем на каждую из них, то под кнопками формируется список того, что мы выбрали. Фактически это сухая версия вот этого приложения Конструктор финансовых целей.

Сейчас у меня получилось сделать только с инпутами, но вот как сделать это с кнопками до меня не доходит

function App() {
  const [deeds, setDeeds] = React.useState([]);

  function handleAddTask(e) {
    const input = e.target.previousSibling;

    setDeeds([...deeds, input.value]); 
    
    input.value = '';
  }

  return (
    <>
      <h3>Мои цели</h3>
      <input type="text" placeholder="Цели" />
      <button onClick={handleAddTask}>Добавить!</button>
      <ol>
        {deeds.map((deed, i) => (
          <li key={i}>{deed}</li>
        ))}
      </ol>
    </>
  );
}

Answer 1

Можно сделать примерно так:

// import React from "react";

const listOfTasks = [
  { id: 0, name: "Заработать на машину" },
  { id: 1, name: "Войти в айти" },
  { id: 2, name: "Получить премию" },
];

const Tasks = () => {
  const [currentList, setCurrentList] = React.useState([]);

  const buttonHandler = (task) => {
    const isInList = !!currentList.find((item) => item.id === task.id);
    const newList = isInList
      ? currentList.filter((item) => item.id !== task.id)
      : [...currentList, task];
    setCurrentList(newList);
  };

  return (
    <div>
      <div>
        {listOfTasks.map((task) => (
          <button key={task.id} onClick={() => buttonHandler(task)}>
            {task.name}
          </button>
        ))}
      </div>
      <div>
        {currentList.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </div>
  );
};

// export default Tasks;

ReactDOM.render(<Tasks />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

БЛОГ НА HUSL

Как передать данные значений button в список React.js

Ответы (1 шт):