I have many checkbox it render as the description below I want to change the nested value its in blue circle in the pic

user_12757360 0
Viewed 30

This is my state: view screenshot the part in the circle is the part of the state that I want to change

**This is my checkbox input **

{this.state.data.map((elm) => (
    <div className={classes.rowContainer}>
      <h3>{elm.name}</h3>
      {elm.groupes.map((group) => (
        <input
          className={classes.checkBox}
          name={elm.name}
          groupes={group.groupName}
          checked={group.value}
          type='checkbox'
          onChange={this.changeValue}
        />
      ))}
    </div>
))}

This is the object passed to component:

 const data = [
  {
    name: 'Créer un groupe',
    groupes: [
      { name: 'commercial', value: true },
      { name: 'manager', value: false }
    ]
  },
  {
    name: 'Détruire un groupe ',
    groupes: [
      { name: 'commercial', value: false },
      { name: 'manager', value: false }
    ]
  }
]
react-redux material-ui reactjs javascript
1 Answers

To update the specific boolean value for a given checkbox, you can make use of the .map() calls indexes from the arrays, and pass those to the onChange handler of the checkbox inputs to update the correct value in the state.

To update the state itself safely and without mutation, you'll need to deep copy the data array (using a round trip through JSON in this case), then update the right value using the indexes, then assign the new data to the state.

Here is a working snippet that illustrates how this works:

const data = [{
    name: 'Créer un groupe',
    groupes: [
        { name: 'commercial', value: true },
        { name: 'manager', value: false }
    ]
}, {
    name: 'Détruire un groupe ',
    groupes: [
        { name: 'commercial', value: false },
        { name: 'manager', value: false }
    ]
}];
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data };
    }
    changeValue = (sectionIndex, groupIndex) => {
        const dataCopy = JSON.parse(JSON.stringify(this.state.data));
        const group = dataCopy[sectionIndex].groupes[groupIndex];
        group.value = !group.value;
        this.setState({ data: dataCopy });
    }
    render() {
        return (
            <div>
                { this.state.data.map((elm, i) => (
                    <div key={`${i}`}>
                        <h3>{elm.name}</h3>
                        { elm.groupes.map((group, j) => (
                            <input key={`${i}${j}`} name={elm.name}
                                   checked={group.value} type="checkbox"
                                   onChange={() => this.changeValue(i, j)} />
                        )) }
                    </div>
                )) }
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

user_73689850
Related