I did not understand your code well so I understand it from what you have written. And then I have created a working example for you. Hope it can help you!
> **UPDATED CODE**
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const Table=(props)=>(
<table>
{
props.items.map((item, i) => (
<tr key={i}>
<td>
<input type="checkbox" checked={props.parentState[item.name]} name={item.name} onChange={props.handleChange} />
</td>
<td>{item.value}</td>
</tr>
))
}
</table>
);
class App extends React.Component {
items = [
{
value: 'EN',
name: 'field1'
},
{
value: 'IT',
name: 'field2',
}
];
state = {
checkAll: false,
};
render() {
return (
<div>
Check All
<input type="checkbox" onChange={this.handleCheckAll} checked={this.state.checkAll}/>
<Table
handleChange={this.handleChange}
items={this.items}
parentState={this.state}
/>
</div>
);
}
handleCheckAll = () => {
this.setState({
checkAll: !this.state.checkAll
}, () => {
this.items.forEach((item) => this.setState({ [item.name]: this.state.checkAll}))
});
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.checked
}, () => {
const uncheckedItems = this.items.filter((item) => !this.state[item.name])
this.setState({
checkAll: uncheckedItems.length === 0?true:false
});
});
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<!-- end snippet -->
class CheckboxTest extends React.Component {
constructor() {
super();
this.state = {
selectAll: false,
data1: false,
data2: false
};
this.selectAll = this.selectAll.bind(this);
this.selectField = this.selectField.bind(this);
}
selectAll() {
this.setState({
data1: !this.state.selectAll,
data2: !this.state.selectAll,
selectAll: !this.state.selectAll
});
}
selectField(event) {
if (event.target.value === "data1")
this.setState({ data1: !this.state.data1 });
else this.setState({ data2: !this.state.data2 });
}
render() {
return (
<div className="App">
<table>
<tbody>
<tr>
<td align="center">
<input
checked={this.state.data1}
onChange={this.selectField}
type="checkbox"
name="myTextEditBox1"
value="data1"
/>
</td>
<td>data 1</td>
</tr>
<tr>
<td align="center">
<input
checked={this.state.data2}
onChange={this.selectField}
type="checkbox"
name="myTextEditBox2"
value="data2"
/>
</td>
<td>data 2</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td align="center">
<input
onChange={this.selectAll}
type="checkbox"
name="myTextEditBox1"
value="all"
/>
</td>
<td>Click all</td>
</tr>
</tbody>
</table>
</div>
);
}
}
You can use the state for implementing this. Maintain state for each checkbox field and when the checkbox is changed trigger a method to set the state according to your conditions
