Реагировать, не отображая элементы списка

Проблема

Он не показывает элементы внутри item. На данный момент он ничего не отображает.

List.js

import React from 'react';

const List = props => (
  <div>
    {
      props.items.map((item, index) => {
      return <div key = {index}>
          <h1>{item.name}</h1>

          <p>{item.term}</p>

      </div>
    })}
  </div>
);

экспорт списка по умолчанию;

App.js

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

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            term: '',
            name: '',
            items: []
        };
    }

    onChange = (event) => {
        const { name, value } = event.target;
        this.setState({ [name]: value });

    }

    onSubmit = (event) => {
        event.preventDefault();

        this.setState({
            term: '',
            name: '',
            items: [
                ...this.state.items,
                this.state.term,
                this.state.name
            ]
        });

    }

    render() {
        const { term, name, items } = this.state;
        return (
          <div>
                <form className = "App" onSubmit = {this.onSubmit}>
                    <input name = "term" value = {this.state.term} onChange = {this.onChange}/>
                    <input name = "name" value = {this.state.name} onChange = {this.onChange}/>
                    <button>Submit</button>
                </form>


              <List items = {this.state.items} />

            </div>
        );
    }

}