title: React JS: Cannot get input from user, get undefined when typing
body: <p>I am writing an app so that a user can fill in a registration form and then it will be shown the name and other parameters of this person using React JS, all of this also coming from a Smart Contract. I am getting the problem of having undefined inputs after typing into the text inputs and I suspect it has something to do with the state, but not sure how to fix it.</p>
  
  <p>Here is the code for the Parent code, called App.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import dxclogo from './dxclogo.png';
  import './App.css';
  import Web3 from 'web3';
  import _ from 'lodash'
  import { Form } from './Form';
  
  //Declaring the ethereum client (initializing) with the url in which the testrpc is running
  var ETHEREUM_CLIENT = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
  
  //These could be dynamically added through input fields, but hard coding for now
  var peopleContractABI = [{"constant":true,"inputs":[],"name":"getPeople","outputs":[{"name":"","type":"bytes32[]"},{"name":"","type":"bytes32[]"},{"name":"","type":"bytes32[]"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"people","outputs":[{"name":"firstName","type":"bytes32"},{"name":"lastName","type":"bytes32"},{"name":"age","type":"bytes32"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_firstName","type":"bytes32"},{"name":"_lastName","type":"bytes32"},{"name":"_age","type":"bytes32"}],"name":"addPerson","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"}]
  
  var peopleContractAddress = '0x7d58e54b812b1f7c5c47f0a85af5f9f6a1d3f5c8'
  
  var peopleContract = ETHEREUM_CLIENT.eth.contract(peopleContractABI).at(peopleContractAddress)
  
  class App extends Component{
    constructor(props){
      super(props);
      this.state = {
        firstNames: [],
        lastNames: [],
        ages: []
      }
    }
  
    componentWillMount(){
      var data = peopleContract.getPeople()
      this.setState({
        firstNames: String(data[0]).split(','),
        lastNames: String(data[1]).split(','),
        ages: String(data[2]).split(',')
      })
    }
  
    render() {
      var TableRows = []
  
      _.each(this.state.firstNames, (value, index) =&gt; {
      TableRows.push(
        &lt;tr&gt;
          &lt;td&gt;{ETHEREUM_CLIENT.toAscii(this.state.firstNames[index])}&lt;/td&gt;
          &lt;td&gt;{ETHEREUM_CLIENT.toAscii(this.state.lastNames[index])}&lt;/td&gt;
          &lt;td&gt;{ETHEREUM_CLIENT.toAscii(this.state.ages[index])}&lt;/td&gt;
        &lt;/tr&gt;
      )
    })
  
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;img src = {dxclogo} className ="App-dxclogo" alt="dxclogo" /&gt;
            &lt;h1&gt;Hotel Room Booking dApp&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;Form /&gt;
            &lt;table className="App-tablePeople"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;First Name &lt;/th&gt;
                  &lt;th&gt;Last Name &lt;/th&gt;
                  &lt;th&gt;Age &lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {TableRows}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Child code, called Form.js</p>
  
  <pre><code>import React from 'react';
  import Web3 from 'web3';
  
  //Declaring the ethereum client (initializing) with the url in which the testrpc is running
  var ETHEREUM_CLIENT = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
  
  //These could be dynamically added through input fields, but hard coding for now
  var peopleContractABI = [{"constant":true,"inputs":[],"name":"getPeople","outputs":[{"name":"","type":"bytes32[]"},{"name":"","type":"bytes32[]"},{"name":"","type":"bytes32[]"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"people","outputs":[{"name":"firstName","type":"bytes32"},{"name":"lastName","type":"bytes32"},{"name":"age","type":"bytes32"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_firstName","type":"bytes32"},{"name":"_lastName","type":"bytes32"},{"name":"_age","type":"bytes32"}],"name":"addPerson","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"}]
  
  var peopleContractAddress = '0x7d58e54b812b1f7c5c47f0a85af5f9f6a1d3f5c8'
  
  var peopleContract = ETHEREUM_CLIENT.eth.contract(peopleContractABI).at(peopleContractAddress)
  
  //Need to create a variable named accounts in order to know which account
  //to make the transactions from
  var accounts = ETHEREUM_CLIENT.eth.accounts
  
  //Creating the dynamic input fields for the user to input his/her data
  export class Form extends React.Component{
    constructor(props){
    super(props);
    this.state = {
      firstName: "",
      lastName: "",
      age: "",
    }
  
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({firstName: event.target.firstName});
      this.setState({lastName: event.target.lastName});
      this.setState({age: event.target.age});
  
    }
  
    handleSubmit(event) {
      alert('A user was submitted: ' + this.state.firstName + this.state.lastName + this.state.age);
      event.preventdefault();
    }
  
  
  //Creating so that person can be added
    componentWillMount(){
       peopleContract.addPerson(this.state.firstName, this.state.lastName, this.state.age, {from: accounts[1], gas: 3000000})
      }
  
    render() {
      return(
        &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;h4&gt;Name&lt;/h4&gt;
          &lt;input
            type="text"
            placeholder="Name, e.g. Javier"
            firstName={this.state.firstName}
            onChange={this.handleChange}  /&gt;
          &lt;div&gt;
          &lt;h4&gt;Last Name&lt;/h4&gt;
            &lt;input
              type="text"
              placeholder="Last Name, e.g. Hernandez"
              lastName={this.state.lastName}
              onChange={this.handleChange}/&gt;
          &lt;/div&gt;
          &lt;div&gt;
          &lt;h4&gt;Age&lt;/h4&gt;
            &lt;input
              type="text"
              placeholder="Age, e.g. 35"
              age={this.state.age}
              onChange={this.handleChange}/&gt;
          &lt;/div&gt;
          &lt;input
            type = "submit"
            name = "Submit"
            /&gt;
        &lt;/form&gt;
      );
    }
  }
  </code></pre>