Inputs Example

App.js

import React, { Component } from "react";
import Form from "./components/Form";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      finalInputState: {}
    };
  }

  handleSubmit = (stuff) => {
    console.dir(stuff);
  };

  render() {

    return (
      <div className="App">
       <Form handleSubmit={this.handleSubmit}/>
      </div>
      // <OtherRoute  data={this.state.finalInputState} />
    );
  }
}

export default App;

Form.js

import React, { Component } from "react";

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input:{
        firstName: "",
        age: "",
      }
    };
  }

  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState(state => ({
      ...state,
      input:{
        ...state.input,
        [name]: value,
      }
    }));
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.handleSubmit(this.state)
  };

  render() {
    return (
      <div className="App">
        <form>
          <label>
            First Name
            <input onChange={this.handleInputChange} name="firstName" />
          </label>
          <label>
            Age
            <input onChange={this.handleInputChange} name="age" />
          </label>
          {/* Button type influence actions */}
          <button type="button" onClick={this.handleSubmit}>
            Submit
          </button>
        </form>
      </div>
    );
  }
}

export default Form;