Step 19

Let's change the Search component by taking the state out of the constructor!

class Search extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    word: "hello"
  }

  // the rest has not changed
}

This alternative approach to declaring state directly as a field works in React! The transpiler that comes with the create-react-app build tool allows you to add fields to class components.

Since the constructor is only calling the parent constructor, it can be removed altogether!

class Search extends Component {
  state = {
    word: "hello"
  }

  // the rest has not changed
}

Some developers prefer this style, but I like to keep the constructor as it often is helpful for other purposes. So, let's change everything back to how there were!

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      word: "hello",
    };
  }
  
  // the rest has not changed
}