Changing buttons colours on click in react js,-CodePudding

I have 5 buttons created using map method. When User clicks on the button, button should change colour to red. When User clicks another button - previous button need to change colour back to original colour, but newly pressed button should change colour to red etc. I got suck in finding the best algorithm for that. Ironically i think i solved this task a few month ago, but totally forgot. Your help will be much appreciated!

That's the code to create 5 buttons

 {priceranges.map((range, index) => (
        <Button
          key={index}
          sx={{
            backgroundColor: bgcolor[index].color,
            border: "1px solid pink",
            height: "30px",
            margin: "5px 5px 0 5px",
            fontSize: {
              xs: "0.6em",
              sm: "0.8em",
              md: "0.9em",
              lg: "0.9em",
              xl: "0.9em",
            },
          }}
          onClick={() => filterproducts(range, index)}
        >
          {range.displayas}
        </Button>
      ))}

This is priceranges array of objects:

  const priceranges = [
{ range: 0, displayas: "All" },
{ range: 1, displayas: "Under 50" },
{ range: 2, displayas: "$50-$79" },
{ range: 3, displayas: "$80-$199" },
{ range: 4, displayas: "$200 " },

];

That's the array i created to manage background colour for buttons

 const [bgcolor, setbgcolor] = useState(
new Array(priceranges.length).fill({ color: "white" }));

Thats the Onclick function:

const filterproducts = (range, index) => {
if (range.range === index) {

HERE I NEED TO PUT SOME LOGIC.

}}

Maybe my approach is totally wrong. But i hope my idea makes sense

CodePudding user response：

Try this:

import React, {useState} from 'react'

const priceranges = [
    { range: 0, displayas: "All" },
    { range: 1, displayas: "Under 50" },
    { range: 2, displayas: "$50-$79" },
    { range: 3, displayas: "$80-$199" },
    { range: 4, displayas: "$200 " },
];

export default function MyComponent(props){
    const [activeButton, setActiveButton] = useState(null)

    const filterproducts = (range, index) => {
        setActiveButton(index)
        if (range.range === index) {
          // Your logic here
        }
    }

    return <>
        {
            priceranges.map((range, index) => (
                <button
                    key={index}
                    sx={{
                        backgroundColor: activeButton === index ? 'red': 'white',
                        border: "1px solid pink",
                        height: "30px",
                        margin: "5px 5px 0 5px",
                        padding: '3px 10px',
                        fontSize: {
                        xs: "0.6em",
                        sm: "0.8em",
                        md: "0.9em",
                        lg: "0.9em",
                        xl: "0.9em",
                        },
                    }}
                    onClick={() => filterproducts(range, index)}
                >
                    {range.displayas}
                </button>
            ))
        }
    </>
}