React - не обновляется State при нажатии на кнопку

Question

У меня небольшое приложение, которое фильтрует данные, представленные в таблице согласно выбранному фильтру. Сейчас я могу выбрать только один фильтр. Мне нужно, чтобы я мог одновременно выбрать несколько. Я знаю, что фильтр возвращает новый массив уже отфильтрованных данных в данном случае. Думаю, мне нужно как-то его поместить в setState() ~ чтобы он был один для всех объектов.

Вот кусок кода:

Button Component:

сonst Button = ({title, filter}) => {
  return (
    <div>
      <button
        type="button"
        className={"btn btn-light w-100 mb-3"}
        onClick={() => {
          filter();
        }}
      >
        {title}
      </button>
    </div>
  );
};

export default Button;

Table Component:

const Table = () => {
  const [state, setState] = useState(Data);

  const arr = [
    {
      title: "Доход",
      filter: () => setState(state.filter((item) => item.type === "Доход")),
    },
    {
      title: "Расход",
      filter: () => setState(state.filter((item) => item.type === "Расход")),
    },
  ];

  const [activeState, setActiveState] = useState(arr);

  return (
    <div>
      <div id="table" className="table">
        <table className="table">
          <thead>
            <tr>
              <th>id</th>
              <th>value</th>
              <th>type</th>
              <th>date</th>
            </tr>
          </thead>
          <tbody>
            {state.map((item, index) => (
              <tr key={index}>
                <td>{item.id}</td>
                <td>{item.value}</td>
                <td>{item.type}</td>
                <td>{item.date}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {activeState.map((obj, index) => (
        <Button key={index} title={obj.title} filter={obj.filter} />
      ))}
    </div>
  );
};

export default Table;

Не могу понять, как это реализовать. Заранее благодарю!

*state - данные таблицы, activeState - кнопки

Answer 1

Если я правильно понял задачу:

И вы хотите сделать чекбокс из кнопок, нажав на которые, можно будет по сабмиту отправить массив выбранных элементов, то вы можете сделать стейт для отмеченных элементов:

const [checked, setChecked] = useState(() =>
      data.map((item) => {
        return { id: item.id, checked: false }
      }),
    )

И по сабмиту достать элементы со значением checked: true, для дальнейшей их обработки.

БЛОГ НА HUSL

React - не обновляется State при нажатии на кнопку

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