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 -->
My guess is your single product checkboxes are bound to some data you have in state, whether local or redux. The checkbox input type has a `checked` prop which accepts a boolean value which will determine if the checkbox is checked or not.
The idea would be to set all items checked prop (whatever you are actually using for that value) to true upon clicking the select all checkbox. Here is example code you can try and run.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {
items: [
{
label: "first",
checked: false,
},
{
label: "last",
checked: false,
}
],
selectAll: false,
}
renderCheckbooks = (item) => {
return (
<div key={item.label}>
<span>{item.label}</span>
<input type="checkbox" checked={item.checked} />
</div>
);
}
selectAll = (e) => {
if (this.state.selectAll) {
this.setState({ selectAll: false }, () => {
let items = [...this.state.items];
items = items.map(item => {
return {
...item,
checked: false,
}
})
this.setState({ items })
});
} else {
this.setState({ selectAll: true }, () => {
let items = [...this.state.items];
items = items.map(item => {
return {
...item,
checked: true,
}
})
this.setState({ items })
});
}
}
render() {
return (
<div className="App">
{this.state.items.map(this.renderCheckbooks)}
<span>Select all</span>
<input onClick={this.selectAll} type="checkbox" checked={this.state.selectAll} />
</div>
);
}
}
export default App;
I have items in state. Each item has a `checked` prop which I pass to the checkbox getting rendered for that item. If the prop is true, the checkbox will be checked otherwise it wont be. When I click on select all, I map thru my items to make each one checked so that the checkbox gets checked.
[Here][1] is a link to a codesandbox where you can see this in action and mess with the code.
[1]: https://codesandbox.io/s/w6ow1n0rp5
