React JS- Multiple Buttons-CodePudding

I'm trying to make multiple toggles buttons, and whenever the user clicks on any one of them, then I want it to become a bit darker. So, that user knows which one they've clicked.

Here's sample code I've written. CODE:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [active, setActive] = useState("first");

  return (
    <>
    <div className="App"> 
    <button className="button" active={active === "first"} onClick={() => {setActive("first"); }} >first</button>
    <button className="button" active={active === "Second"} onClick={() => {setActive("Second"); }} >Second</button>
    <button className="button" active={active === "Third"} onClick={() => {setActive("Third"); }} >Third</button>
      </div>
    </>
  );
}

Now, How do I make an OnClick function that holds the after Click? functionality?

CodePudding user response：

You can do it like this:

<button
  className={`button ${active === "first" ? "activeButton" : ""}`}
  onClick={() => {
    setActive("first");
  }}
>
  first
</button>
<button
  className={`button ${active === "Second" ? "activeButton" : ""}`}
  onClick={() => {
    setActive("Second");
  }}
>
  Second
</button>
<button
  className={`button ${active === "Third" ? "activeButton" : ""}`}
  onClick={() => {
    setActive("Third");
  }}
>
  Third
</button>

And then in you css file:

.activeButton {
  background-color: red;
}