React Props Fundamentals

Hi Readers

In this blog, we'll be going over the fundamentals of props and how to use them. We will also cover how information flows between parent and child components

---

What are Props?

Oftentimes, an App will separate the different aspects of its page into individual components. This will allow the debugging process to be much more efficient and enable the programmers to be much more organized. Props store data that can be accessed by the children of a component.

For Example:

I have imported data containing a movie and its information in an object. I want to send its information to the "Home" child component which possesses the code necessary to render the Home section of the page. To do so, I must pass the data I want to access to that component as props. In this example, we want to render the movie's title and release year. The syntax to do so is shown below.

import React from "react"
import Home from "./home"
import movie from "./data/people"

/* movies object that is imported
const movie: {
    title: "The Godfather",
    director: "Francis Ford Coppola",
    releaseYear: "1972",
    coverImage: "https://i.ytimg.com/vi/U8GdYixWfOc/movieposter_en.jpg"
   }
*/

function App() {
    return(
        <div>
            <Home 
                title={movie.title} 
                year={movie.releaseYear}
                image={movie.image}
            />
        </div>
    )
}

The code above is correctly passing the needed data to the child component "Home" properly. However, that data still has to be accessed and used within the "Home" component. Below are a few different methods of accessing and using the props.

Example 1:

In this method, we are using one parameter called "props" and dot notation to specify exactly what information we want to use.

import React from "react"

function Home(props) {
    return (
        <div id="home">
            <h1> {props.title} was released in {props.year} </h1>
            <img src={props.image} alt={props.title} />
        </div>
    )
}

export default Home

Example 2:

In this method, we are destructuring the movie object within the parameter using curly brackets. In this case, we need to use the names of the props we passed earlier in our parent App component. This will make for much cleaner code and allow us to directly use the keys we want.

import React from "react"

function Home({title, year, image}) {
    return (
        <div id="home">
            <h1> {title} was released in {year} </h1>
            <img src={image} alt={title} />
        </div>
    )
}

export default Home

Default Values for Props

To safeguard the rendering process and make sure the composition of more complex data sets doesn't cause issues, we can use default values on our props. This helps to narrow down issues in the debugging process and makes the rendering smoother.

import React from "react"

function Home({title, year, image = "https://media.tacdn.com/media/attractions-splice-spp-674x446/06/73/23/1c.jpg"}) {
    return (
        <div id="home">
            <h1> {title} was released in {year} </h1>
            <img src={image} alt={title} />
        </div>
    )
}

export default Home

Now, instead of an error returning, the default value of "image" will be used if we don't correctly pass in the data from App