CODEWITHSUNDEEP
javascripthtmlcssreactjs
The Dead Man
The Dead Man

Reputation: 5566

Changing text color on click with react hooks

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?

Upvotes: 2

Views: 10210

Answers (3)

Awais Rafiq Chaudhry
Awais Rafiq Chaudhry

Reputation: 490

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

Upvotes: 2

Fabricio Brito
Fabricio Brito

Reputation: 11

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

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

Upvotes: 0

&#199;ağatay Sel
&#199;ağatay Sel

Reputation: 810

Change your handleChangeTextColor to following:

const handleChnageTextColor = (e) => {

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

Upvotes: 2

Related Questions