ReactJS: dynamic checkboxes from State
<p>I have a collection of elements which is dynamic, so I do not know up front what the content of the collection is. I want to dynamically render these checkboxes, and have them by default all checked. You should be able to uncheck the boxes, which triggers another map function in render. (so basically it are my filters)</p>

<p>I am struggling on the state setup.
I was thinking of the following, where I want to set the initialState during ComponentWillMount by an API call:</p>

<pre><code>scenario 1 (arrays): 

this.state {
    checkboxes: [value1, value2, value3],
    checkedcheckboxes: [value1, value2]
}
</code></pre>

<p>Then I can use the react.addons.update function to change checkcheckboxes state. The downside is that during render of my checkboxes, I have to loop through the checkcheckboxes array with indexOf on every checkbox to see if it should be checked.</p>

<pre><code>scenario 2 (object):

this.state {
    checkboxes: {
       value1: true,
       value2: true,
       value3: false
}
</code></pre>

<p>This way I have dynamic keys, which makes it harder to work (I guess), since I have to use computed fields in my setState. I was also under the impression that this could have negative impact on my performance.</p>

<p>Is there any best practice on this pattern?</p>

<p>Thank you! </p>