Skip to content

Latest commit

 

History

History
37 lines (32 loc) · 774 Bytes

File metadata and controls

37 lines (32 loc) · 774 Bytes

We change ListItem to look like this

import React, { Component } from "react";

class ListItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDone: false
    };
  }

  handleInputChange = (event) => {
    const value = event.target.checked;
    this.setState({
      isDone: value
    });
  };

  render() {
    return (
      <li>
        <input
          type="checkbox"
          checked={this.state.isDone}
          onChange={this.handleInputChange}
        />
        <span>{this.props.content}</span>
      </li>
    );
  }
}

export default ListItem;

Now, we control the state of the checkbox by having it explicitly in our ListItem's this.state! And to change it, we have the handleInputChange function.