I'm trying to implement a fields set of checkboxes in React rendered from an object as follows:

constructor() {

    this.state.todo = {
        eat: true,
        sleep: false,
        react: true
    }

    this.toggleCheckbox = this.toggleCheckbox.bind(this);
}

toggleCheckbox(e){

    console.log(e); // nothing :-/
}

render() {

    return (
    <div>
    { Object.keys(this.state.todo).map((val, i) => (          
        <div key={i} >
            <input 
                type="checkbox" 
                value={val} 
                onChange={this.toggleCheckbox} 
                checked={this.state.todo[val]} 
                /><label>{val}</label>
        </div>
     ))}
     </div>
    )
}

Everything renders correctly but I am not able change any of the checkboxes. console logging the toggleCheck() event is not being triggered.

Ive tried using onClick vs onChange which has no effect.

I'm trying to implement a fields set of checkboxes in React rendered from an object as follows:

constructor() {

    this.state.todo = {
        eat: true,
        sleep: false,
        react: true
    }

    this.toggleCheckbox = this.toggleCheckbox.bind(this);
}

toggleCheckbox(e){

    console.log(e); // nothing :-/
}

render() {

    return (
    <div>
    { Object.keys(this.state.todo).map((val, i) => (          
        <div key={i} >
            <input 
                type="checkbox" 
                value={val} 
                onChange={this.toggleCheckbox} 
                checked={this.state.todo[val]} 
                /><label>{val}</label>
        </div>
     ))}
     </div>
    )
}

Everything renders correctly but I am not able change any of the checkboxes. console logging the toggleCheck() event is not being triggered.

Ive tried using onClick vs onChange which has no effect.

• javascript
• reactjs
• data-binding
• checkboxlist
• react-dom

• 1 actually the problem as in CSS, not JS. these checkboxes are custom styled using <label>'s and the hiding/placement of the label was blocking the event. apologies again about the false alarm – yevg Commented Aug 9, 2018 at 17:05

1 Answer 1

You are getting the keys from this.state.tables, but your state is called this.state.todo.

You can use each value as name instead and toggle the relevant todo state property with that.

Example

class App extends React.Component {
  state = {
    todo: {
      eat: true,
      sleep: false,
      react: true
    }
  };

  toggleCheckbox = e => {
    const { name } = e.target;
    this.setState(prevState => ({
      todo: {
        ...prevState.todo,
        [name]: !prevState.todo[name]
      }
    }));
  };

  render() {
    return (
      <div>
        {Object.keys(this.state.todo).map((val, i) => (
          <div key={i}>
            <input
              type="checkbox"
              name={val}
              onChange={this.toggleCheckbox}
              checked={this.state.todo[val]}
            />
            <label>{val}</label>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>