Basic uncontrolled inputs form using refs

UncontrolledRefForm.js

import React, { Component } from 'react'

export default class UncontrolledRefsForm extends Component {
  onSubmit = (e) => {
    e.preventDefault()
    // Usually, we would pass the final input values to a function that
    // would do something with the data like persist it to a database.
    // Using refs, we just need to pass the reference values.
    console.log({
      firstName: this.firstName.value,
      spiritAnimal: this.spiritAnimal.value,
    })
  }

  render() {
    // Let's see when re-renders happen.
    console.log('render!')

    return (
      <form onSubmit={this.onSubmit}>
        <h1>Controlled Inputs Example</h1>
        <label>
          Name
          <input ref={(input) => this.firstName = input} />
        </label>
        <label>
          Spirit Animal
          <input ref={(input) => this.spiritAnimal = input} />
        </label>
        <button>Submit</button>
      </form>
    )
  }
}