Table Accordion in React JS

Question

I want to make table accordion .when I clicked on table row the next table data should display by default first one should be open and when I click another header there content should open without closing previous one.

I have created the state:

const [active, setActive] = useState(false);
  const handleClick = () => {
    setActive(!active);
  };
  return (
    <div>
      <div>
        <table className="table border">
          <tr>
            <td colSpan={3} className="header" onClick={handleClick}>
              Winfield
            </td>
          </tr>
          {active && (
            <tr>
              <td>USJN - Tifton </td>
              <td>12 </td>
              <td> 800</td>
            </tr>
          )}

          <tr>
            <td colSpan={3} className="header" onClick={handleClick}>
              Helena
            </td>
          </tr>
          {active && (
            <tr>
              <td>USJN - Tifton USJN - Tifton USJN - Tifton USJN - Tifton </td>
              <td>12 </td>
              <td> 800</td>
            </tr>
          )}
        </table>
      </div>
    </div>
  );

Answer 1

One way would be to extract the accordion row into it's own separate component. This will allow you to have separates states for each row.

function CollapsibleRow({ data, defaultIsOpen = false, children }) {
  const [isOpen, setIsOpen] = React.useState(defaultIsOpen);

  return (
    <React.Fragment>
      <tr>
        <td colSpan={3} className="header" onClick={() => setIsOpen(!isOpen)}>
          {data}
        </td>
      </tr>
      {isOpen && children}
    </React.Fragment>
  );
}

function App() {
  return (
    <div>
      <div>
        <table>
          <tbody>
            <CollapsibleRow data="Winfield" defaultIsOpen={true}>
              <tr>
                <td>USJN - Tifton </td>
                <td>12 </td>
                <td> 800</td>
              </tr>
            </CollapsibleRow>
            <CollapsibleRow data="Helena">
              <tr>
                <td>
                  USJN - Tifton USJN
                </td>
                <td>12 </td>
                <td> 800</td>
              </tr>
            </CollapsibleRow>
          </tbody>
        </table>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>