I'm trying to get only checked items saved in an array So that I'm going to export it as a CSV file. need help, that's my sandbox below;

https://codesandbox.io/s/laughing-bush-5fvl7b?file=/src/App.js

CodePudding user response：

You can save the selected items id in state. Have a look:

import { useState } from "react";
import { CategoriesData } from "../data";
import "./styles.css";

export default function App() {
  const [selectedIds, setSelectedIds] = useState([]);

  return (
    <div className="App">
      <table id="categories">
        <thead>
          <tr id="titres">
            <td className="input-check">
              <input type="checkbox" className="checkbox" />
            </td>
            <td>CATEGORIES</td>
            <td>DESCRIPTION</td>
          </tr>
        </thead>
        <tbody>
          {CategoriesData.map((category, index) => (
            <tr
              id={`element-${index}`}
              key={category._id}
              className={
                selectedIds.includes(category.id) ? "product active" : "product"
              }
            >
              <td className="input-check">
                <input
                  type="checkbox"
                  className="checkbox"
                  onClick={(e) => {
                    var selected = e.target.checked;
                    if (selected) {
                      setSelectedIds([...selectedIds, category.id]);
                    } else {
                      setSelectedIds([
                        ...selectedIds.filter((x) => x !== category.id)
                      ]);
                    }
                  }}
                />
              </td>
              <td>{category.designation}</td>
              <td id="category-desc">{category.description}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>