How to use state as a valid attribute in ReactJs?

Question

I use the checkbox flag in the render, so one important attribute is to determine if it is there checkedor not defaultChecked. I set the state earlier in componentWillReceiveProps. I try to put the state as an attribute first, but I get an error Unexpected tokenwhen compiling the code with babel.js. After I try to use dangerouslySetInnerHTML, but it still does not work (bottom error).

First try:

<input type="checkbox" name="onoffswitch" {this.state.required} />

App.jsx

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            required: ''
        };
    };

    componentWillReceiveProps( nextProps ){
        //more code    
        this.setState({
            required: 'defaultChecked'
        });
    };

    render() {
      return(
        <div id="section">                
            <div className="bottom-question">
                <div>
                    <div className="onoffswitch-add pull-left">
                        <input type="checkbox" 
                               name="onoffswitch" 
                               dangerouslySetInnerHTML={this.state.required} />

                        <label className="onoffswitch-label-add" htmlFor="switch-required">
                            <div className="onoffswitch-inner-add"></div>
                            <div className="onoffswitch-switch-add"></div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    )
  }
}

Error:

The full text of the error you just encountered is:

input is a void element tag and must neither have `children` 
nor use `dangerouslySetInnerHTML`. Check the render method of EditInput

Answer 1

you want to use a property checkedto apply check validation in javascript

<input type="checkbox" name="onoffswitch" checked={this.state.required === 'defaultChecked'} />

, , ( 'defaultChecked'), , .

checked

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false
        };
    };

    componentWillReceiveProps( nextProps ){
        //more code    
        this.setState({
            checked: true
        });
    };

    render() {
      return(
        <div id="section">                
            <div className="bottom-question">
                <div>
                    <div className="onoffswitch-add pull-left">
                        <input type="checkbox" 
                               name="onoffswitch" 
                               checked={this.state.checked} />

                        <label className="onoffswitch-label-add" htmlFor="switch-required">
                            <div className="onoffswitch-inner-add"></div>
                            <div className="onoffswitch-switch-add"></div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    )
  }
}

Answer 2

, <input required={this.state.required} />

Answer 3

React .

<input type="checkbox" name="onoffswitch" disabled={this.state.required} />

this.state.required boolean

Answer 4

, disabled true, , false, .

, , . , onChange, true- > false .

.

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      checkboxState: false
    };
  }
  
  toggleCheckbox = () => {
    this.setState({checkboxState: !this.state.checkboxState});
  }
  
  render() {
    return (
      <form>
        <input type="checkbox" name="onoffswitch" onChange={this.toggleCheckbox} />
        <input type="submit" disabled={!this.state.checkboxState} value="submit" />
      </form>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Hide result