How to change the style of an element when clicked in React

Question

Im trying to figure out how to change the color style of a checkbox when clicked on in react. It should also toggle back to the old color when clicked again.

function handleClick() { DO SOMETHING HERE TOGGLE THE FILL COLOR }

<CheckCircle onClick={handleClick} style={{ fill: colors.orange }} />

Answer 1

You can use a state for this.

Define the state in your component:

const [clicked, setClicked] = useState(false)

The handleClick funtion would look like this:

function handleClick() {
    setClicked(!clicked);
}

Finally use the clicked variable to adjust your style. Maybe something like this:

<CheckCircle onClick={handleClick} style={{ fill: clicked ? colors.orange : colors.red }} />

Answer 2

const [isChecked, setIsChecked] = useState(true) function handleOnClick() { setIsChecked(prevState => !prevState) } return <CheckCircle onClick={handleOnClick} style={{ fill: isChecked ? colors.orange : OTHER_COLOR }} />