title: React handling multiple checkboxes
body: <p>I made a PoC to see how to handle my change detection on a dynamic list of checkboxes (note, i do not know beforehand how many checkboxes i have.) I created a n ES6 map (Dictionary) that tracks the checked state of each individual checkbox. but for some reason I get the following error:</p>
  
  <pre><code> A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component
  </code></pre>
  
  <p>Usually when my number of form input fields is known i track them via the state, but how would one handle this case. The logic works fine, but I need to get rid of the error.</p>
  
  <p>My app code:</p>
  
  <pre><code>    import React, { Component } from "react";
      import Checkbox from "./checkbox";
  
      class App extends Component {
          constructor(props) {
              super(props);
  
              this.state = {
                  checkedItems: new Map()
              };
  
              this.handleChange = this.handleChange.bind(this);
          }
  
          handleChange = e =&gt; {
              const item = e.target.name;
              const isChecked = e.target.checked;
              this.setState(prevState =&gt; ({
                  checkedItems: prevState.checkedItems.set(item, isChecked)
              }));
          };
  
          deleteCheckboxState = (name, checked) =&gt; {
              const updateChecked = typeof checked === "undefined" ? true : false;
              this.setState(prevState =&gt; prevState.checkedItems.set(name, updateChecked));
          };
  
          clearAllCheckboxes = () =&gt; {
              const clearCheckedItems = new Map();
              this.setState({ checkedItems: clearCheckedItems });
          };
  
          render() {
              const checkboxes = [
                  {
                      name: "check-box-1",
                      key: "checkBox1",
                      label: "Check Box 1"
                  },
                  {
                      name: "check-box-2",
                      key: "checkBox2",
                      label: "Check Box 2"
                  },
                  {
                      name: "check-box-3",
                      key: "checkBox3",
                      label: "Check Box 3"
                  },
                  {
                      name: "check-box-4",
                      key: "checkBox4",
                      label: "Check Box 4"
                  }
              ];
  
              const checkboxesToRender = checkboxes.map(item =&gt; {
                  return (
                      &lt;label key={item.key}&gt;
                          {item.name}
                          &lt;Checkbox
                              name={item.name}
                              checked={this.state.checkedItems.get(item.name)}
                              onChange={this.handleChange}
                              type="checkbox"
                          /&gt;
                      &lt;/label&gt;
                  );
              });
  
              const checkboxesDeleteHandlers = checkboxes.map(item =&gt; {
                  return (
                      &lt;span
                          key={item.name}
                          onClick={() =&gt;
                              this.deleteCheckboxState(
                                  item.name,
                                  this.state.checkedItems.get(item.name)
                              )
                          }
                      &gt;
                          {item.name} &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;
                      &lt;/span&gt;
                  );
              });
  
              return (
                  &lt;div className="App"&gt;
                      {checkboxesToRender}
                      &lt;br /&gt; {checkboxesDeleteHandlers}
                      &lt;p onClick={this.clearAllCheckboxes}&gt;clear all&lt;/p&gt;
                  &lt;/div&gt;
              );
          }
      }
  
      export default App;
  </code></pre>
  
  <p>The checkbox reusable component:</p>
  
  <pre><code>import React from "react";
  
  class Checkbox extends React.Component {
      render() {
          return (
              &lt;input
                  type={this.props.type}
                  name={this.props.name}
                  checked={this.props.checked}
                  onChange={this.props.onChange}
              /&gt;
          );
      }
  }
  
  export default Checkbox;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/2QHLj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2QHLj.png" alt="enter image description here"></a></p>