How to get Form data in React

With event elements

import React from 'react';

class ReactForm extends React.Component {
  handleSubmit(event) {
    event.preventDefault();
    console.log(event.target[0].value);
    console.log(event.target[1].value);
  }

  
  render() {
    return(
      <form onSubmit={this.handleSubmit}>
        <label>name</label>
        <input />
        <label>email</label>
        <input />
        <button type="submit">Submit</button>
      </form>
    )
  }
}

With event named elements

import React from 'react';

class ReactForm extends React.Component {
  handleSubmit(event) {
    event.preventDefault();
    cosnole.log(event.elements.name.value);
    cosnole.log(event.elements.email.value);
  }

  render() {
    return(
      <form onSubmit={this.handleSubmit}>
        <label>name</label>
        <input name="name" />
        <label>email</label>
        <input name="email" />
        <button type="submit">Submit</button>
      </form>
    )
  }
}

With refs

import React from 'react';

class ReactForm extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(event) {
    event.preventDefault();
    console.log(this.refs.name.value);
    cosnole.log(this.refs.email.value);
  }
  
  render() {
    return(
      <form onSubmit={this.onSubmit}>
        <label>name</label>
        <input name="name" ref="name" />
        <label>email</label>
        <input name="email" ref="email" />
        <button type="submit">Submit</button>
      </form>
    )
  }
}

With refs using arrow function

class ReactForm extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(event) {
    event.preventDefault();
    console.log(this.nameInput.value);
    console.log(this.emailInput.value);
  }
  
  render() {
    return(
      <form onSubmit={this.onSubmit}>
        <label>name</label>
        <input name="name" ref={el => (this.nameInput = el)} />
        <label>email</label>
        <input name="email" ref={el => (this.emailInput = el)} />
        <button type="submit">Submit</button>
      </form>
    )
  }
}

With state

class ReactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '', email: '' };
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(event) {
    event.preventDefault();
    console.log(this.state.name);
    console.log(this.state.email);
  }
  
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <label>name</label>
        <input 
          name="name" 
          onChange={el => this.setState({ name: el.target.value })} />
        <label>email</label>
        <input 
          name="email" 
          onChange={el => this.setState({ email: el.target.value })} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}