Changing text color on click with react hooks

user_9964622 0
Viewed 5711

I have a simple section where user can click a button, now I want on click to change (toggle) the color of the text using react hooks here is what I have so far.'

const [textColor, setTextColor] = useState('black');

 const handleChnageTextColor = (e) => {
    setTextColor('#CCCCCC');
}

return(
<>
<label onClick={handleChnageTextColor} className="switch">
        <input type="checkbox" />
        <span className="slider round" />
</label>

 <small style={{ color:textColor}} className="switch-container_text">advanced view</small>
</>
)

so the initial color is black on click I am changing color to #CCCCCC now when I click again the color is not changing.

What do I need to add to make this toggle between these two colors on click?

reactjs css html javascript
3 Answers

Change your handleChangeTextColor to following:

const handleChnageTextColor = (e) => {

 setTextColor(textColor === 'black' ? '#CCCCCC' : 'black');
}
user_81688820

You should assign the value of checkbox with some state variable and make the color of the text dependant on the checkbox value. Following will surely help you achieve the desired results.

const [textColor, setTextColor] = useState('black');
const [isBlack, setIsBlack] = useState(true);

const handleChnageTextColor = (e) => {
  setIsBlack(!isBlack);
  setTextColor(isBlack ? '#CCCCCC' : 'black ');
}

return(
  <>
   <label className="switch">
     <input type="checkbox" value={isBlack} onChange={handleChnageTextColor} />
     <span className="slider round" />
   </label>
   <small style={{ color:textColor}} className="switch-container_text">advanced view</small>
  </>
 )
}
user_122815390

You should check the element style value to decide the color to apply:

if(e.style.color === "black") '#CCCCCC' : 'black'
user_87017070
Related