changing button's color in react.js using array and usestate

Question

In this react.js code I should read button’s label from “categorylist”. When I click on a button ,the color changed for all buttons. How can I change the color of each button by clicking on each one seperatly? Here is my code:

export default function CategoryPicker() {

const categorylist = [ { label: "Fact", id: 0, }, { label: "Event", id: 1, }, { label: "People", id: 2, }, { label: "Secure", id: 3, }, ]; const [clsitemchanged, setclsitemchanged] = useState("blue");

return ( Select a category

  <style>{`
    .blue {color: rgb(59,130,246);  border: 2px solid rgb(59,130,246); background-color:white; padding:12px 15px; inline-size:80px; border-radius: 9999px; margin-inline-start:3px;}
    .white {color: white; border: 2px solid rgb(59,130,246); background-color:rgb(59,130,246); padding:12px 15px; inline-size:80px; border-radius: 9999px; margin-inline-start:3px;}
  `}</style>
  {categorylist.map((currentElement) => {
    return (
      <button
        className={clsitemchanged}
        key={currentElement.id}
        onClick={() =>
          setclsitemchanged((ctr) => (ctr === "blue" ? "white" : "blue"))
        }
      >
        {currentElement.label}
      </button>
    );
  })}
 
</div>

); }

Wraithy · Accepted Answer · 2022-08-09 08:32:02Z

You need either array of changed items or separate component for button, that remembers its state.

return
  {categorylist.map((currentElement) => {
    return (
      <button
        className={clsitemchanged[id]}
        key={currentElement.id}
        onClick={() =>
          setclsitemchanged((ctr) => ({...ctr, [currentElement.id]: (ctr[currentElement.id]==="blue" ? "white" : "blue")}))
        }
      >
        {currentElement.label}
      </button>
    );
  })}

or separate component:

const MyButton = ({children})=>{
const [clsitemchanged, setclsitemchanged] = useState("white")
<button
        className={clsitemchanged}
        onClick={() =>
          setclsitemchanged((ctr) => (ctr==="blue" ? "white" : "blue"))
        }
      >
       {children}
      </button>
}

 {categorylist.map((currentElement) => {
    return (
      <MyButton   
        key={currentElement.id}>
        {currentElement.label}
      </MyButton>
    );
  })}

Collectives™ on Stack Overflow

changing button's color in react.js using array and usestate

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related