Pass Props to Children in React

Anyone who is learning know that components are the main characters in React. It’s also true that thinking in components is a remarkable skill, maybe, sooner or later, i’ll try to write an article about that.

Let’s start from the beginning: what is a Component? A component is a special type in React (but also in Angular, Vue.js, …), a mix between JavaScript and HTML ‘n’ DOM. Imagine it as an atom, “the smallest matter in the universe” (but also not). If we combine more atoms we’ll get a molecule, an so on. Components let us split our app or website into reusable pieces. Conceptually they’re like JavaScript function, they’ll return a value and accept parameters, the latter are Props (propositions).

Tip 1: start Component name with a capital letter.

component-in-react
Take for example the mock-up of my (simple) app, movie-finder.

Well, suppose that we have an App component that contains other components, like Card and SearchBox (as in the picture). Suppose also that we want to pass the text, typed into the SearchBox, to the component which takes the name of the movie and its image. How we can do it? We can do it in React?

So, let’s explore how props works. We have two choiche to write a component:

  • Function component
  • Class component

Tips 2: use generic names for components. Remember that you can reuse it.

There is no real difference at this level. This define a component as a function (I recommend to use the function format in our case):

function SearchBox(props) {
  return <input type="search" value={props.movieName}/>;
}

And this as a class:

class SearchBox extends React.Component {
  render() {
    return <input type="search" value={props.movieName}/>;
  }
}

Suppose that we have a main App component with a list of objects of movies that we want to use in our SearchBox component. For example we have an object like the following and we want to get Title and Poster

const moviesDB = [{
        Title: "The Matrix",
        Year: "1999",
        imdbID: "tt0133093",
        Type: "movie",
        Poster: "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg"
    },
    {
        Title: "The Matrix Reloaded",
        Year: "2003",
        imdbID: "tt0234215",
        Type: "movie",
        Poster: "https://m.media-amazon.com/images/M/MV5BODE0MzZhZTgtYzkwYi00YmI5LThlZWYtOWRmNWE5ODk0NzMxXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg"
    },
    {
        Title: "The Matrix Revolutions",
        Year: "2003",
        imdbID: "tt0242653",
        Type: "movie",
        Poster: "https://m.media-amazon.com/images/M/MV5BNzNlZTZjMDctZjYwNi00NzljLWIwN2QtZWZmYmJiYzQ0MTk2XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"
    }];

So, this is our main component App:

...
import {moviesDB} from './moviesDB.js';

class Appextends React.Component {
    render() {
      return (
          <div>
              <Header />
              <Card title={moviesDB[0].Title} cover={moviesDB[0].Poster}/>
              <Card title={moviesDB[1].Title} cover={moviesDB[1].Poster}/>
          </div>
      )
    }
  }

Tips 3: Don’t try to change props. For that go look at States.

(Try to ignore the ‘Card’ repetition, normally we use a loop).
So, it seems that App component pass the movie title and cover to Card component though attributes… just a clarification: these are not attributes, just as in HTML, but props in JSX.

The rest you’re able to understand.



Further reading

Leave a Comment

Your email address will not be published. Required fields are marked *