gistfile1.txt

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

class App extends Component {

  constructor() {
    super() 

    // create a state to store name 
    this.state = {
      name: '', 
      age: ''
    }

   // this.handleNameTextBoxChange = this.handleNameTextBoxChange.bind(this)
    
  }

  /*
  handleNameTextBoxChange = (e) => {
    this.setState({
      name: e.target.value
    })
  }

  handleAgeTextBoxChange = (e) => {
    this.setState({
      age: e.target.value 
    })
  } */

  handleTextBoxChange = (e) => {
    
    console.log(e.target.name) 

    this.setState({
      // create the name of the property using the textbox name 
      [e.target.name]: e.target.value
    })

    /*
    this.setState({
      name: e.target.value, 
      age: e.target.value 
    }) */

  }

  /*
  handleNameTextBoxChange(e) {
    
    this.setState({
      name: e.target.value
    })
  } */

  render() {
    return (
      <div>
        <input name="name" type="text" placeholder="Name" onChange={this.handleTextBoxChange} />

        <input name="age" type="text" placeholder="Age" onChange={this.handleTextBoxChange} />

        <h1>{this.state.name}</h1>
      </div>
    )
  }
}

export default App