Как добавить класс active активному компоненту?

Question

[Denis_8106]

Ребята, подскажите как реализовать такую задачу в функциональном стиле React (+ хуки).
Есть родительский компонент, в нем есть 2 кнопки и 2 таблицы. В начале (при загрузке app) 1я кнопка и 1я таблица имеют класс active. При нажатии на 2ю кнопку - класс active переходит на 2ю кнопку и 2ю таблицу. Ну и т.д. , я думаю функционал ясен. При нажатии кнопки, меняется ее стиль (add class active) + у соответствующей таблицы появляется класс active.

В JS реализовал быстро, а вот в React возникли сложности. При необходимости можно еще задействовать класс show, если надо. В общем буду благодарен за любую помощь.

Answer 1

[n1ksON]

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>
  );
}