Step 17

Let's add a constructor to the Search class component as follows:

  constructor(props) {
    super(props);
    this.state = {
      word: "hello"
    }
  }

We will cover what the props argument is. First, however, make a note of the state property.

A component's state is managed internally by the component itself. It is meant to change over time, commonly due to user input (e.g., entering a value in a form input field, clicking on a button on the page, etc.).

A component's state represents mutable data. The "state" ultimately affects what is rendered on the page.

Update the <input> element and give it a value attribute to bind its value to the value of the word stored inside the component's state.

    <input
      className="input is-large is-fullwidth"
      id="define-input"
      placeholder="Enter a word"
      type="text"
+     value={this.state.word}
    />

Visit the running app in the browser. Note how the value of this.state.word is displayed in the search bar (input element). However, you are not able to change (update) the value. Indeed, React has taken control of the HTML form!