Finished app

App.js

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

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      formItems: [],
      newFormElement: ''
    }
  }
  handleChange(e) {
    this.setState({newFormElement: e.target.value})
  }
  handleSubmit(e) {
    e.preventDefault();
    if(!this.state.newFormElement) {return}
    this.setState({formItems: [...this.state.formItems, this.state.newFormElement], newFormElement: '' });
  }

  render() {
    return (
      <div className="App">
        <ul>
          {this.state.formItems.map( (element, index) =>
          <Form
            key={index}
            formElement={element}
          />
          )}
          </ul>
          <form onSubmit={(e) => this.handleSubmit(e)}>
            <input type="text"
              value={this.state.newFormElement}
              onChange={ (e) => this.handleChange(e)}
            />
            <input type="submit" />
          </form>
      </div>
    );
  }
}

export default App;

Form.js

import React, { Component } from 'react';

class Form extends Component {
  render() {
    return(
      <div className="Form">
        <li> {this.props.formElement} </li>
      </div>
    );
  }
}

export default Form;