Step 25

We will now update the Definitions and Phonetics components to "receive" the data they use from the parent App component. This situation is where props come in!

A prop is any input that you pass to a React component.

Just like we use arguments to pass data to functions, we use props to give data to React Components.

Update the Definitions component as follows:

function Definitions(props) {
  const { meanings } = props;

  // the rest of the function has not changed!
}

Note I'm using the object destructuring assignment to access the meanings property inside the props object.

Update the Phonetics component as follows:

function Phonetics(props) {
  const { phonetics } = props;

  // the rest of the function has not changed!
}

Let's update the App component to pass its state as props to the Definitions and Phonetics components.

  render() {
    return (
      <>
        <Header />
        <Search />
-       <Phonetics />
+       <Phonetics phonetics={this.state.phonetics} />
-       <Definitions />
+       <Definitions meanings={this.state.meanings} />
        <Footer />
      </>
    );
  }

Like an HTML attribute, a prop is declared as a name and value pair when added to a React component. (Props is short for properties.)

Save all the changes you have made and visit the running app in the browser. Of course, the app's function must be the same as before we have made these changes.

Resources