<file_sep>import React, { Component } from 'react';

class ListContainer extends Component {
    listItems = () => {
        // Get the listItems from the properties passed in to the component
        const items = this.props.listItems;

        if(items.length) {
            // If confused with this mess, look up JS array map and using react with that
            // Basically just run a function for each item in the list/array,
            // then return the output for all of them combined
            return items.map((item, i) => {
                // CSS text-decoration: line-through is shown for li.checked
                // The onChange event handler is passed in as a property to the component
                return (
                    <li key={i} className={item.checked ? "checked" : ""}>
                        <input
                            type="checkbox"
                            value={i}
                            onChange={this.props.handleCheckBox}
                            checked={item.checked}
                        /> {item.title}
                    </li>
                );
            });
        } else {
            // When no items in list
            return (
                <li>No Items</li>
            );
        }
    }

    render() {
        return (
            <div className="ListContainer">
                <ul>
                    {this.listItems()}
                </ul>
            </div>
        );
    }
}

export default ListContainer;
<file_sep>import React, { Component } from 'react';

class ItemForm extends Component {
    constructor(props){
        super(props);
        this.state = {
          title : ''
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.addItem(this.state.title);
        this.setState({title: ''});
    }

    handleInputChange = (e) => {
        this.setState({[e.target.name]: e.target.value});
    }

    render() {
        return (
            <div className="ItemForm">
                <form onSubmit={this.handleSubmit}>
                    <input
                        type="text"
                        name="title"
                        value={this.state.title}
                        onChange={this.handleInputChange}
                    />
                    <input type="submit" value="Add" />
                </form>
            </div>
        );
    }
}

export default ItemForm;
<file_sep># React To-Do List
This is an example of using react to create a simple to-do list.

An example of the use of component state and properties to store non-persistent data for a simple to-do list.

## Install dependencies
Make sure you have node.js installed

In the project directory before you can run the app you need to install the dependencies:
```bash
npm install
```

Now you can run the app
```bash
npm start
```

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
