Props in React ✨

Props (properties) are for communication among components. Think of it like an argument to functions. So this allows us to pass data between components using said props.

• One thing to remember about passing props is that it is a unidirectional flow, the order should be: Parent ➡️ Child

Let's try to pass some data down with props!

So we'll say that our "App.js" is our parent function. (Typically this is on top of your component hierarchy)

Here we'll also import our child component. So let's call it Header.
Our goal here is to make Header more dynamic.

Let's make a quick component hierarchy just so we can remember where we're at because things can get messy quick.

├── App
│ ├── Header

Nothing too crazy here yet, but remember to stop and think about what component parents which. This will be very important in making your workflow a lot less painful.

Don't forget to import React

App.js

import React from 'react'
import Header from './Header'

function App() {
    return (
    <div>
        <Header />
    </div>
    );
}

export default App;

So this is how App is currently looking. I want to give it some props to pass down.

• The syntax for creating props for a component is the same syntax as for writing attributes for an HTML tag.

import React from 'react'
import Header from './Header'

function App() {
    return (
    <div>
        <Header greeting="Hello" name="Mely"/>
    </div>
    );
}

export default App;

Now we have some props to pass down! Header now has access to the information we have stored in the attributes.

• Note: Coolest thing about props is that they can be any data type, in this example it is a string data type.

Let's use this data in our Header component.

Header.js

import React from 'react'

function Header(props) {
    return (
    <div>
        <h2>{props.greeting}!, my name is {props.name}.</h2>
    </div>
    );
}

export default Header;

Header takes in the props as an argument to the React function. You can gain access to the data by using dot notation.

• Syntax of passing down the data is {props.insertNameOfPropHereLol}

If dot notation is just too much for your keyboard, we could also pass down props using destructuring. Destructuring makes it possible to unpack the value into its own distinct variables.

Header.js

import React from 'react'

function Header({greeting, name}) {
    return (
    <div>
        <h2>{greeting}!, my name is {name}.</h2>
    </div>
    );
}

export default Header;

The new syntax for the Header's argument is to wrap the specific props we want to pass down in a curly bracket{}. This makes our code so much easier to read and know what's going on.

We did it!! We passed down information using props :)

In depth on destructuring
React Props Explained with Examples
Components and Props