Possible to add css styles to specific component buttons? - reactjs

Question

I'm trying to add a white outline via css box-shadow, but whenever I click on any of the buttons, they all get the outline instead of just the actual button I clicked.
Is there a way so only the button component I click on gets the outline and then toggles off if I click it again?
Here is my current code:
const [selectState, setSelectState] = useState(false);
const Button = ({ selected, text }) => {
function handleClick() {
setSelectState(true);
}
return (
<span
onClick={handleClick}
className={`btn-style ${selected ? "selected" : ""}`}
>
{text}
</span>
);
};
export default function Hello() {
return (
<Button selected={selectState} text='Blue'/>
<Button selected={selectState} text='Red'/>
<Button selected={selectState} text='Green'/>
);
}
.selected css:
.selected {
box-shadow: rgb(17 206 101) 0px 0px 0px 2px inset !important;
}

Answer 1

If you want to track the selected state of individual elements, you'd need to handle the onClick method and make corresponding state change in parent element.
const Button = ({ selected, text, onClick }) => {
return (
<span
onClick={onClick}
className={`btn-style ${selected ? "selected" : ""}`}
>
{text}
</span>
);
};
export default function Hello() {
const [selectState, setSelectState] = React.useState(0);
return (
<React.Fragment>
<Button
onClick={() => setSelectState(1)}
selected={selectState === 1}
text="Blue"
/>
<Button
onClick={() => setSelectState(2)}
selected={selectState === 2}
text="Red"
/>
<Button
onClick={() => setSelectState(3)}
selected={selectState === 3}
text="Green"
/>
</React.Fragment>
);
}

Answer 2

You can have the click handler tell the parent component to save the clicked button index in state, and pass that state down to determine whether the selected class is needed:
const Button = ({ selected, text, onClick }) => {
return (
<span
onClick={onClick}
className={`btn-style ${selected ? "selected" : ""}`}
>
{text}
</span>
);
};
export default function Hello({ texts }) {
const [selectedIndex, setSelectedIndex] = useState(-1);
return (<>
{
texts.map((text, i) => <Button selected={i === selectedIndex} text={text} onClick={() => setSelectedIndex(i)}} />)
}
</>);
}
ReactDOM.render(<Hello texts={['Blue', 'Red', 'Green']} />, document.querySelector('.react'));