title: React: How to set dynamic states for an Array of checkboxes
body: <p>I have a ServiceCard component which takes in an Object. This object may have a rights key with an Array of rights, each with <code>disabled:true</code> or <code>disabled:false</code>.</p>
  
  <p>How would you setup the basic state for this kind of use case?</p>
  
  <p><strong>What the Rights Array looks like for a Service object:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/dQ1Un.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dQ1Un.png" alt="enter image description here"></a></p>
  
  <p>(Just realized I miss-spelled turret :p)</p>
  
  <h2>Constructor and the Rights map function</h2>
  
  <pre><code>constructor(props) {
    super(props);
    this.onChangeHandler = this.onChangeHandler.bind(this);
    this.updateService = this.updateService.bind(this);
  
    // How to define this.state for dynamic Rights Array?
  
    this.state = {
      serviceName: props.name,
      rights: props.rights
    }
  
    props.rights.map(right =&gt; {
      console.log(' map right', right)
      console.log(' this.state', this.state)
    })
  }
  
  
  // Later down in the render...
  &lt;ul&gt;
    {
      rights.map(right =&gt;
        &lt;li key={ right.name }&gt;
          &lt;input type="checkbox"
                 checked={ !right.disabled }
                 onChange={ () =&gt; this.onChangeHandler(name, right) }/&gt;
          &lt;p&gt;{ right.name }&lt;/p&gt;
        &lt;/li&gt;
      )
    }
  &lt;/ul&gt;
  </code></pre>
  
  <h2>Full component code</h2>
  
  <pre><code>import React, { Component } from 'react'
  
  export default class ServiceCard extends React.Component {
    constructor(props) {
      super(props);
      this.onChangeHandler = this.onChangeHandler.bind(this);
      this.updateService = this.updateService.bind(this);
      this.deleteService = this.deleteService.bind(this);
    }
  
    onChangeHandler(name, right) {
      console.log('onChangeHandler...')
      console.log(' name', name)
      console.log(' right', right)
  
    }
  
    deleteService(serviceName) {
      this.props.deleteService(serviceName);
    }
  
    render () {
      const name = this.props.name;
      // console.log('this.props', this.props)
      const rights = this.props.rights;
  
      return (
        &lt;li className="service-card-item"&gt;
          &lt;section className="card"&gt;
            &lt;div className="icon-connectdevelop service-icon"&gt;&lt;/div&gt;
            &lt;div className="service-details"&gt;
              &lt;h3&gt;{ name }&lt;/h3&gt;
              &lt;section className="rights-section"&gt;
                &lt;ul&gt;
                  {
                    rights.map(right =&gt;
                      &lt;li key={ right.name }&gt;
                        &lt;input type="checkbox" checked={ !right.disabled } onChange={ () =&gt; this.onChangeHandler(name, right) }/&gt;
                        &lt;p&gt;{ right.name }&lt;/p&gt;
                      &lt;/li&gt;
                    )
                  }
                &lt;/ul&gt;
                &lt;div className="icon-cancel-circled" title="Delete Service" onClick={ () =&gt; this.deleteService(name) }&gt;&lt;/div&gt;
              &lt;/section&gt;
            &lt;/div&gt;
          &lt;/section&gt;
        &lt;/li&gt;
      )
    }
  }
  </code></pre>