Step 16

HTML form elements naturally keep some internal state and update it based on user input. In React, the mutable state is kept in the state property of (a class) components and only updated with setState(). We should combine the two by making the React state be the "single source of truth."

An input form element whose value is controlled by React is called a controlled component.

This means the React component that renders a form also controls what happens in that form on subsequent user input.

So, let's update the Search component to be a class component.

import React, { Component } from "react";

class Search extends Component {
  render() {
    return (
      <section className="section">
        <div className="field has-addons">
          <div className="control is-expanded">
            <input
              className="input is-large is-fullwidth"
              id="define-input"
              placeholder="Enter a word"
              type="text"
            />
          </div>
          <div className="control">
            <button className="button is-info is-large" id="define-btn">
              Define
            </button>
          </div>
        </div>
      </section>
    );
  }
}

export default Search;

The class component works the same as the function component. Please verify this by checking the app running in the browser. So far, we have not made a controlled component, but we set the scene for it. In the following sections, we will update the Search component to achieve that goal.