How to add class active to active component?

Question

React

Guys, tell me how to implement such a task in the functional style of React (+ hooks).
There is a parent component, it has 2 buttons and 2 tables. At the beginning (when the app is loaded), the 1st button and the 1st table have the active class. When you click on the 2nd button - the active class goes to the 2nd button and the 2nd table. Well, etc. , I think the functionality is clear. When a button is clicked, its style changes (add class active) + the corresponding table has an active class.

I implemented it quickly in JS, but there were difficulties in React. If necessary, you can also use the show class, if necessary. In general, I will be grateful for any help.

Answer 1

import React, { useState } from "react";

export default function App() {
  const [state, setState] = useState([
    { id: 0, status: true },
    { id: 1, status: false }
  ]);
  const chooseItem = (id) => {
    const newArr = state.map((item) =>
      item.id === id ? { ...item, status: true } : { ...item, status: false }
    );
    setState(newArr);
  };
  return (
    <div className="App">
      {state.map((item) => (
        <div style={{ border: item.status ? "3px solid tomato" : "none" }}>
          <div>TABLE {item.id}</div>
          <button onClick={() => chooseItem(item.id)}>CLICK</button>
        </div>
      ))}
    </div>
  );
}