Как сделать, чтобы при нажатии кнопки, менялся цвет фона только у выбранной кнопки, а не на всех?

Question

[Анатолий Кучин]

Вывожу блок по ключу. Как сделать, чтобы при нажатии кнопки, менялся цвет фона только у выбранной кнопки, а не на всех?

let btn = this.state.change ? "clinic-card__bookmark" : "clinic-card__bookmark-active";

        function handleClick(e) {
            e.preventDefault();
        }

        return <div className="search-result-list" key={clinic.ID}>
            <div className="search-result__card card-shadow">
                <div className="clinic-card">
                    <h2 className="clinic-card__title">
                        {clinic.NAME}
                        <div className={btn_class} onClick={handleClick}>.....

Comments

[Tim]

полный код компонента скинуть нужно

Answer 1

[Loli E1ON]

const Button = () => {
  const [state, setState] = useState(false);

  const onClickButton = () => setState(state => !state);

  return (
    <div className={state ? "btn-active" : "btn"} onClick={onClickButton}>
      Button
    </div>
  );
};

const Buttons = () => {
  return (
    <div>
      <Button />
      <Button />
      <Button />
    </div>
  );
};

const App = () => <Buttons />;

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

Answer 2

[hzzzzl]

где-нибудь сохранять, что именно этот clinic.ID в данный момент -active