So I have multiple setting buttons and I need them to individually toggle their background colors
here’s a simplified jsx example
JavaScript
x
19
19
1
function App() {
2
const [toggle, setToggle] = useState(false);
3
4
document.querySelectorAll('.setting-tile').forEach(el =>
5
el.addEventListener('click', setToggle(!toggle)));
6
7
return (
8
<div className='container'>
9
<button className={`settings ${toggle? 'change-color' : ''}`}</button>
10
11
<button className={`settings ${toggle? 'change-color' : ''}`}</button>
12
13
<button className={`settings ${toggle? 'change-color' : ''}`}</button>
14
15
<button className={`settings ${toggle? 'change-color' : ''}`}</button>
16
</div>
17
)
18
}
19
CSS
JavaScript
1
7
1
.settings {
2
background-color: white;
3
}
4
.change-color {
5
background-color: blue;
6
}
7
but of course this won’t work because the style would be applied to all the buttons at once.
How can I identify which one is clicked and style that specific button without having to create states and event listeners for all the buttons?
Edit – In case this wasn’t clear, I’d like to be able to toggle all the buttons independently of each other.
Advertisement
Answer
I would do something as below … most of it is self explanatory 😉
JavaScript
1
28
28
1
const {useState} = React;
2
3
function App() {
4
const [selected, setSelected] = useState("");
5
6
const handleClick = (name) => {
7
setSelected(name)
8
}
9
10
return (
11
<div className="container">
12
<Button name="one" selected={selected} onClick={handleClick}/>
13
<Button name="two" selected={selected} onClick={handleClick}/>
14
<Button name="three" selected={selected} onClick={handleClick}/>
15
<Button name="four" selected={selected} onClick={handleClick}/>
16
</div>
17
);
18
}
19
20
function Button({name, onClick, selected}){
21
return <button onClick={()=>onClick(name)} className={`settings ${name===selected ? "change-color" : ""}`}>{name}</button>
22
}
23
24
ReactDOM.createRoot(
25
document.getElementById("root")
26
).render(
27
<App/>
28
);
JavaScript
1
6
1
.settings {
2
background-color: white;
3
}
4
.change-color {
5
background-color: blue;
6
}
JavaScript
1
3
1
<div id="root"></div>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
As per the comment below – one button toggle doesn’t un-toggle the other
JavaScript
1
32
32
1
const {useState} = React;
2
3
function App() {
4
const [selected, setSelected] = useState({
5
one : false,
6
two : false,
7
three : false,
8
four : false
9
});
10
11
const handleClick = (name, isSelected) => {
12
setSelected(prev=>({prev,[name]: !isSelected}))
13
}
14
15
return (
16
<div className="container">
17
{Object.entries(selected).map(([btn, isSelected])=>(
18
<Button key={btn} name={btn} isSelected={isSelected} onClick={handleClick}/>
19
))}
20
</div>
21
);
22
}
23
24
function Button({name, onClick, isSelected}){
25
return <button onClick={()=>onClick(name, isSelected)} className={`settings ${isSelected ? "change-color" : ""}`}>{name}</button>
26
}
27
28
ReactDOM.createRoot(
29
document.getElementById("root")
30
).render(
31
<App/>
32
);
JavaScript
1
6
1
.settings {
2
background-color: white;
3
}
4
.change-color {
5
background-color: blue;
6
}
JavaScript
1
3
1
<div id="root"></div>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>