How to enable/disable a button on click of a checkbox in React js?

Question

Can someone help me with this code I've researched quite a lot and I'm stuck.

class App extends Component{
   constructor(props){
     super(props);
    this.isChecked=this.isChecked.bind(this);
   }
 }
 isChecked = (chk,sub1) => {
   var btn = document.getElementById(sub1);
     if (chk.checked == true) {
         btn.disabled = false;
     } else {
         btn.disabled = true;
     };
  
 }



function App(){         
return(
     <form>
    <div className='check'>
      <input 
      type='checkbox'
      className='checkbox'
      id='termschkbx'
      onchange="isChecked(this,'sub1')"
      />
      
      <span>I agree to Terms & Conditions.<a href="" className='readme'>Read here</a> </span>
    </div>
    <div>


    <button
    type="submit"
     id="sub1"
     disabled='disabled'
     className=" createaccount" 
     type="submit">CREATE ACCOUNT</button>
    </div>
    </form>
)
}

How to resolve this?

ERROR : Identifier 'App' has already been declared.

Is there any efficient way to do this?

So you're defining a class and function component with the same name, please choose different names in the same file. — Monty Tomar
– Monty Tomar, Commented May 29, 2021 at 15:24

Null Reference Exception · Accepted Answer · 2021-05-29 15:26:30Z

1

Is there any way to style my submit button ? (i.e) It should have one particular color when disabled and one particular color when enabled.

There is a CSS selector :disabled which you can use to style the button when it is disabled.

Look like you haven't used any CSS solution, I would suggest you using CSSModule or styled components

ERROR : Identifier 'App' has already been declared.

You are defining App twice:

class App extends Component { ...

function App(){ ...

Remove one and will resolve the error, but based on the context, you probably should move the content of the function App() into function render() inside your class App

Also, I wouldn't suggest mix-matching React other frameworks

answered May 29, 2021 at 15:26

Null Reference Exception

2324 silver badges9 bronze badges

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

Comments

Monty Tomar · Accepted Answer · 2021-05-29 15:33:06Z

So you can achieve the functionality using the state in the App component.
class App extends Component{
   constructor(props){
     super(props);
    this.state={isHidden : false } // button will not be hidden initally.
   }
 }
 isChecked = () => {
  this.setState((state)=>({isHidden : !state.isHidden})) /* we're setting the state value isHidden equal to the negation of previous value of isHidden onChange event of checkbox */
 }

render(){
return(
     <form>
    <div className='check'>
      <input 
      type='checkbox'
      className='checkbox'
      id='termschkbx'
      onChange={this.isChecked}
      />
      
      <span>I agree to Terms & Conditions.<a href="" className='readme'>Read here</a> </span>
    </div>
    <div>


    {this.state.isHidden && <button
    type="submit"
     id="sub1"
     className=" createaccount" 
     type="submit">CREATE ACCOUNT</button> }
    </div>
    </form>
)
}

Collectives™ on Stack Overflow

How to enable/disable a button on click of a checkbox in React js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related