title: trying to select one check box selecting all check boxes
body: <p>i am trying to presist the checkbox using local storage...after applying that...
  if i select the one checkbox selecting all checkboxes...i using map function for the checkboxes...can any one help on this.....i want to select individual check box</p>
  
  <p>this is the linkmof code sand box :
  <a href="https://codesandbox.io/s/sparkling-wind-rmz1z?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/sparkling-wind-rmz1z?file=/src/App.js</a></p>
  
  <p>branches.js</p>
  
  <pre><code>import React, { Component } from "react";
  import Checkbox from "@material-ui/core/Checkbox";
  import FormGroup from "@material-ui/core/FormGroup";
  import FormControlLabel from "@material-ui/core/FormControlLabel";
  import { List, ListItem } from "@material-ui/core";
  import Button from "react-bootstrap/Button";
  
  // const [isChecked, setIsChecked] = useState(true);
  class BranchComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        value: {},
        count: 0,
        checked: localStorage.getItem("checkbox") === "true" ? true : false
      };
    }
    CheckedBox = e =&gt; {
      let checked = e.target.checked;
      let count = this.state.count;
      if (checked) {
        console.log(checked);
        this.setState({ checked: true });
        count++;
      } else {
        count--;
        console.log(checked);
        this.setState({ checked: false });
      }
      this.setState({ count });
      console.log(count);
  
      let values = this.state.value;
      values[e.target.value] = e.target.checked;
      this.setState({ value: values });
  
      localStorage.setItem("checkbox", e.target.checked.toString());
    };
  
    checkBoxSubmit = e =&gt; {
      e.preventDefault();
      console.log(this.state.value);
    };
    render() {
      const arr = ["Branch 1", "Branch 2", "Branch 3"];
      return (
        &lt;React.Fragment&gt;
          &lt;form onSubmit={this.checkBoxSubmit}&gt;
            &lt;FormGroup aria-label="position" row&gt;
              &lt;List className="courses-college-regis"&gt;
                {arr.map((a, key) =&gt; (
                  &lt;ListItem button key={key}&gt;
                    &lt;FormControlLabel
                      label={a}
                      value={a}
                      type="checkbox"
                      name={a}
                      checked={this.state.checked}
                      control={&lt;Checkbox color="primary" /&gt;}
                      onClick={this.CheckedBox}
                    /&gt;
                  &lt;/ListItem&gt;
                ))}
              &lt;/List&gt;
            &lt;/FormGroup&gt;
            Count :{this.state.count}
            &lt;br /&gt;
            &lt;Button type="submit" variant="primary"&gt;
              Submit
            &lt;/Button&gt;
          &lt;/form&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default BranchComponent;
  </code></pre>