App.js

import React, { Component } from 'react';
import './App.css';
import TodoListItemCreator from './TodoListItemCreator';

class App extends Component {
  handleCreateItem(item) {
    console.log('create item' + item);
  }

  render() {
    return (
      <div className="App">
        <TodoListItemCreator onCreateItem={this.handleCreateItem} />
      </div>
    );
  }
}

export default App;

TodoListItemCreator.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class TodoListItemCreator extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            value: '',
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    
    handleSubmit(e) {
        console.log("submit!");
        e.preventDefault();
        this.props.onCreateItem('foo')
    }

    handleChange(e) {
        this.setState({value: e.target.value});
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Todo Item:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Add Item" />
            </form>
        );
    }
}

TodoListItemCreator.propTypes = {
    onCreateItem: PropTypes.func.isRequired,
};

export default TodoListItemCreator;