title: how do i set programmatically checkbox property 'checked' or 'defaultChecked' in react
body: <p>i am developing web application with react.</p>
  
  <p>I want to dynamically set 'checked' property on checkbox.</p>
  
  <p>It showed a proper screen that i wanted, but not working when i programmatically set 'checked' property.</p>
  
  <p>So, i have searched about this. </p>
  
  <p>some people recommended to use 'defaultChecked' property.</p>
  
  <p>ant then i tried this. but failed.</p>
  
  <p>It has not changed when i had given event that programmatically set checked property. It always showed defaultChecked value.</p>
  
  <p>source code</p>
  
  <pre><code>render() {
  list = {
   resource: {[...], [...] },
   ...
  }
  return (
  &lt;ParameterContainer values={ list } /&gt;
  );
  }
  
      class ParameterContainer extends React.Component {
      constructor(props) {
          super(props);
  
      }
      render() {
          const { values } = this.props;
          return (
              &lt;div className="parameter-table"&gt;
                  &lt;div className="parameter-row-container"&gt;
                      &lt;ul className="parameter-row title"&gt;
                          &lt;li className="parameter parameter-1"&gt;valid&lt;/li&gt;
                          &lt;li className="parameter parameter-2"&gt;Key&lt;/li&gt;
                          &lt;li className="parameter parameter-3"&gt;Type&lt;/li&gt;
                          &lt;li className="parameter parameter-4"&gt;oid&lt;/li&gt;
                          &lt;li className="parameter parameter-5"&gt;rid&lt;/li&gt;
                          &lt;li className="parameter parameter-6"&gt;desc&lt;/li&gt;
                      &lt;/ul&gt;
                      {
                          values.resource.map((value, i) =&gt; {//one row
                              return (
                                  &lt;ParameterItem value={ value } index={ i } key={ i }/&gt;
                              );
                          })
                      }
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  class ParameterItem extends React.Component {
      constructor(props) {
          super(props);
  
      }
  
      render() {
          const { value, index } = this.props;
          const items = [];
  
          for (let o in value) {
              if (o === "valid") {
                  continue;
              }
              items.push(value[o]);
          }
          return (
              &lt;ul className={`parameter-row parameter-row-${ index+1 }`}&gt;
                  &lt;li className="parameter parameter-1"&gt;
                      &lt;input type="checkbox" defaultValue={ value.valid } checked={ value.valid } onChange={ this.toggle }/&gt; //i tried to this.
                      &lt;Checkbox isChecked={ value.valid } /&gt; // and then tried this...
                  &lt;/li&gt;
              &lt;/ul&gt;
          );
      }
  
      toggle(e) {
          $(e.target).prop("checked", e.target.checked ? 0 : 1);
      }
  }
  
  class Checkbox extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              checked: !!this.props.isChecked
          };
      }
  
      handleChange = (e) =&gt; {
          const { target: { checked }} = e;
          this.setState({ checked });
      }
  
      render() {
          return (
              &lt;input type="checkbox" checked={ this.state.checked } onChange={ this.handleChange } /&gt;
          );
      }
  }
  </code></pre>