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?

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?

• javascript
• html
• css
• reactjs

Share Improve this question Follow edited Jul 27, 2020 at 14:39 The Dead Man asked Jul 27, 2020 at 10:16 The Dead ManThe Dead Man 5,5763333 gold badges125125 silver badges226226 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Change your handleChangeTextColor to following:

const handleChnageTextColor = (e) => {

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

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>
  </>
 )
}

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

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