The AnswerScreen component is currently loading a set of MyButton components. I am trying to adjust the style of the MyButton that was clicked, specifically changing the backgroundColor. Unfortunately, my code is not functioning as expected. I have noticed that in a class component, I could achieve this with this.className, but in a functional component, it seems like I cannot utilize this approach (despite having the key). Any suggestions or tips on how I can accomplish this?
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;