JonathanForm.js

import React from 'react';
import ReactDOM from 'react-dom';

export default class Form extends React.Component{

  constructor(){
    super();
    this.state = {
      names: []
    }
  }

  handleSubmit(){
    let firstName = this.refs.firstName.value;
    let lastName  = this.refs.lastName.value;
    let person = {firstName: firstName, lastName: lastName};
    this.refs.firstName.value = "";
    this.refs.lastName.value = "";
    let oldNameState = this.state.names;
    let newNameState = oldNameState.concat(person)
    this.setState({
      names: newNameState
    });
    console.log("your new state is", this.state.names);
  }
  
  render(){
    let names = this.state.names.map((person, index) => {
      return (
        <div id="person" key={person + index}>
          <div>Hello {person.firstName}</div>
          <div>{person.lastName}</div>
        </div>
      )
    });
      return (
        <div>
          First Name <input type="text" ref="firstName" />
          Last Name<input type="text" ref="lastName" />
        <button onClick={this.handleSubmit.bind(this)}> Submit</button>
          {names}
        </div>
      )
  }
}