Controlled Components

JS function that:

• handles submission of the form and
• has access to the data the user entered

How do we get React to know the value of the form immediately upon update?

handleChange()

When a user types into an input it updates on each keystroke.

Example

import React from 'react';

class Form extends React.Component {
  constructor(props) {
    super(props) 
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(e) {
    this.setState({ username: e.target.value });
  }
  
  handleSubmit(e) {
    e.preventDefault();
    alert('you typed `${this.state.username}`);
    this.setState({ username: ''});
  }

  render() {
    return (
      <div>
        <h1>Form Demo</h1>
        <form onSubmit={this.handleSubmit}>
          <input 
          type='text'
          value={this.state.username} 
          onChange={this.handleChange}> />
        </form>
      </div>
    );
  }
}

export default Form;

We can handle 1 - Web Dev/Multiple Form Inputs by giving each input a name prop.