Change style of functional component after click - css

Question

The AnswerScreen component is loading a set of MyButton components. I want to change the style (basically the backgroundColor of the MyButton that was click. The code doesn't work as intended. I see that on a class component I would be able to do it with this.className but in a functional component I cannot use this (although I have the key). Any tips?
import React from 'react';
import classes from './AnswerScreen.module.css';
import MyButton from '../../../../utils/MyButton';
const AnswerScreen = (props) => {
const buttonClickHandler = (index, value) => {
if (props.myValue !== value) {
classes.AnswerScreenButton = {
fontSize: '3rem',
cursor: 'pointer',
backgroundColor: 'red'
}
}
}
return (
<div className={classes.AnswerScreen}>
{props.buttons.map((value, index) => {
return <MyButton
className={classes.AnswerScreenButton}
clickHandler={() => buttonClickHandler(index, value)}
key={index}
num = {value} />
})}
</div>
);
}
export default AnswerScreen;

Answer 1

I assume you want to keep track of which button was pressed in the end? I suggest you add a state variable to keep track of the selected button. You can use that state variable to set the correct classname of the button. Add the class AnswerScreenButtonSelected that contains css for a selected button. I removed your usage of index, they should be avoided when setting keys in mapped arrays in React.
import React from 'react';
import classes from './AnswerScreen.module.css';
import MyButton from '../../../../utils/MyButton';
const AnswerScreen = (props) => {
const [selectedButton, setSelectedButton] = useState(null);
return (
<div className={classes.AnswerScreen}>
{props.buttons.map( value =>
<MyButton
key={value}
className={selectedButton === value ? classes.AnswerScreenButtonSelected : classes.AnswerScreenButton}
clickHandler={() => setSelectedButton(value)}
num = {value} />
)}
</div>
);
}
export default AnswerScreen;