add-form.js

import React from 'react';

export default function AddForm(props) {
    return (
        <form onSubmit={e => props.onSubmit(e)}>
            <label htmlFor="textInput">Item to add:</label>
            <input
                id="textInput"
                type="text"
                onChange={e => props.onChange(e)}
                value={props.inputText}
            />
            <button>Add item</button>
        </form>
    );
}

app.js

import React from 'react';
import TodoList from './todo-list';
import AddForm from './add-form';

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: ['Buy milk', 'Make dinner', 'Fix broadband'],
            inputText: 'Go for a walk'
        };
    }

    addItem(e) {
        e.preventDefault();
        this.setState({
            items: [...this.state.items, this.state.inputText],
            inputText: ''
        });
    }

    render() {
        return (
            <div className="todo-list-app">
                <TodoList items={this.state.items} />
                <AddForm
                    inputText={this.state.inputText}
                    onChange={e => this.setState({inputText: e.target.value})}
                    onSubmit={e => this.addItem(e)}
                />
            </div>
        );
    }
}

todo-list.js

import React from 'react';

export default function TodoList(props) {
    const itemList = props.items.map((item, index) => (
        <li key={index}>{item}</li>
    ));

    return <ul className="todo-list">{itemList}</ul>;
}