React.js button class not changing

Question

I have a checkbox and want to change the class of the button:

   let able = 'btn btn-secondary" disabled';
   
    function handleChange(e) {
     let isChecked = e.target.checked;
     if (isChecked===true){
         able = '"btn btn-primary"';
        console.log(able);
  }

console logs "btn btn-primary" which is correct , however the button is not changing at all and in the return:

  <input class="form-check-input" type="checkbox" id="gridCheck" onChange={e => handleChange(e)} />
  <button type='submit' class={able}>Register</button>

Can someone please let me know what I am doing wrong?

Thank you in advance

Or Assayag · Accepted Answer · 2021-01-02 13:43:10Z

1

In React.js you should use state. I suggest you learn about the basics of React. For your case, this should do the trick:

JSX

import React, { useState } from 'react'; 

const [isChecked, setChecked] = useState(false);
   
const handleChange = (e) => {
     setChecked(e.target.checked);
}

HTML

<input class="form-check-input" type="checkbox" id="gridCheck" onChange={e => handleChange(e)} />
<button type='submit' disabled={!isChecked} class={`btn btn-${isChecked ? 'primary' : 'secondary'}`}>Register</button>

edited Jan 2, 2021 at 13:43

answered Jan 2, 2021 at 13:37

Or Assayag

6,39213 gold badges73 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React.js button class not changing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related