0
139
ViewsChange style to individual item React-Hooks
I want to create a button that when you click it opens a navbar with different colors that when the user presses one of the colors, the navbar is closed and the button it self take the color the user clicked on.
my code works, but I have different outcomes then what I expected
this is the outcome
the green dots all changed at once, i want that only the dot on the item i clicked will change color
this is the code
const colorLevelArr = ["rgb(236, 77, 77)", "rgb(241, 153, 70)", "rgb(255, 253, 151)", "rgb(147, 241, 135)","rgb(132, 220, 255)"];
const [colorLevel, setColorLevel] = useState([]);
const [colorLevelOpen, setcolorLevelOpen] = useState(null);
const toggelColorLevel = (item) => {
setcolorLevelOpen(preOpen => preOpen === item ? null : item)
}
const changeColorLevel = (index, item) => {
setColorLevel(colorLevelArr[index])
setcolorLevelOpen(preOpen => preOpen === item ? null : item)
}and this is the code for the button
<button className="color_level_container"
onClick={() => toggelColorLevel(item)}
style={{
backgroundColor:`${colorLevel}`,
}}>
{colorLevelOpen === item && (
<div className="color_btn_container">
{colorLevelArr.map((colorLevel, index)=>{
return (
<div onClick={()=>{
toggelColorLevel(item)
changeColorLevel(index, item)
}
}
style={{
borderRadius:"100%",
border:"1px solid black",
width:"15px",
height:"15px",
backgroundColor:`${colorLevel}`,
}}>
</div>
)
})}
</div>
)}
</button>if someone can help me understand how to do it right,
and that the only color change will be to the item I pressed
Thank you in advance
1 answers
Answer question0
it looks like you are using one state for the color, and use it for all the items. the easiest way to fix it will be to create a different state for each button, and by so, each one will have its own color. this can be done by creating a component for the button which holds the state for the color, and when state changes, the color of the current component will change accordingly and wont affect the other button components.
I wrote a small example just for you to understand the idea:
const colorsList = ['red', 'yellow', 'blue', 'green'];
const App = () => {
return (
<div style={{ margin: '100px' }}>
<ChangingColorButton />
<ChangingColorButton />
<ChangingColorButton />
<ChangingColorButton />
</div>
);
};
const ChangingColorButton = () => {
const [color, setColor] = useState('black');
return (
<button
onClick={() => setColor(colorsList[Math.floor(Math.random() * 3) + 1])}
style={{ backgroundColor: color, marginRight: '8px' }}>
Click to change color
</button>
);
};as you can see, i have a list of color and by clicking each button its background color change to random color form the list.
This example demonstrate how you can control each color for each button separately.