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