Basic-Form-Refactored

basic-form-refactored.js

import React from 'react'

class BasicFormRefactored extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      firstName: '',
      age: '',
    }
  }

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

  handleSubmit = (event) => {
    event.preventDefault()

    const {
      firstName,
      age,
    } = this.state

    console.log(`A first name was submitted: ${firstName}. An age was submitted: ${age}`)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          First Name:
          <input
            name="firstName"
            type="text"
            value={this.state.firstName}
            onChange={this.handleChange} />
        </label>
        <label>
          Age:
          <input
            name="age"
            type="number"
            value={this.state.age}
            onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export { BasicFormRefactored }