trying to select one check box selecting all check boxes - reactjs

Question

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
this is the linkmof code sand box :
https://codesandbox.io/s/sparkling-wind-rmz1z?file=/src/App.js
branches.js
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 => {
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 => {
e.preventDefault();
console.log(this.state.value);
};
render() {
const arr = ["Branch 1", "Branch 2", "Branch 3"];
return (
<React.Fragment>
<form onSubmit={this.checkBoxSubmit}>
<FormGroup aria-label="position" row>
<List className="courses-college-regis">
{arr.map((a, key) => (
<ListItem button key={key}>
<FormControlLabel
label={a}
value={a}
type="checkbox"
name={a}
checked={this.state.checked}
control={<Checkbox color="primary" />}
onClick={this.CheckedBox}
/>
</ListItem>
))}
</List>
</FormGroup>
Count :{this.state.count}
<br />
<Button type="submit" variant="primary">
Submit
</Button>
</form>
</React.Fragment>
);
}
}
export default BranchComponent;

Answer 1

i updated your code is working fine,
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";
var localStorageData = localStorage.getItem("checkbox");
// const [isChecked, setIsChecked] = useState(true);
class BranchComponent extends Component {
constructor(props) {
super(props);
this.state = {
value: {},
count:
localStorageData && typeof JSON.parse(localStorageData) === "object"
? JSON.parse(localStorageData).length
: 0,
checked:
localStorageData && typeof JSON.parse(localStorageData) === "object"
? JSON.parse(localStorageData)
: []
};
}
CheckedBox = (e, index) => {
let checked = e.target.checked;
let count = this.state.count;
var addData = [...this.state.checked, index];
if (checked) {
console.log(checked);
this.setState({ checked: [...new Set(addData)] });
count++;
} else {
count--;
console.log(checked);
addData = addData.filter(find => find !== index);
this.setState({ checked: addData });
}
this.setState({ count: addData.length });
console.log(count);
let values = this.state.value;
values[e.target.value] = e.target.checked;
this.setState({ value: values });
localStorage.setItem("checkbox", JSON.stringify([...new Set(addData)]));
};
checkBoxSubmit = e => {
e.preventDefault();
console.log(this.state.value);
};
render() {
const arr = ["Branch 1", "Branch 2", "Branch 3"];
return (
<React.Fragment>
<form onSubmit={this.checkBoxSubmit}>
<FormGroup aria-label="position" row>
<List className="courses-college-regis">
{arr.map((a, key) => (
<ListItem button key={key}>
<FormControlLabel
label={a}
value={a}
type="checkbox"
name={a}
checked={this.state.checked.includes(a)}
control={<Checkbox color="primary" />}
onClick={e => this.CheckedBox(e, a)}
/>
</ListItem>
))}
</List>
</FormGroup>
Count :{this.state.count}
<br />
<Button type="submit" variant="primary">
Submit
</Button>
</form>
</React.Fragment>
);
}
}
export default BranchComponent;