CODEWITHSUNDEEP
cssreactjs
Arti
Arti

Reputation: 17

Change style of functional component after click

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;

Upvotes: 0

Views: 287

Answers (1)

hellogoodnight
hellogoodnight

Reputation: 2129

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;

Upvotes: 1

Related Questions