Props Basics: Part 1

This is a beginner friendly tutorial on how to use props. It is important that you understand what destructuring is and how to use / create components before reading.

Props, short for properties, props allow us to send information from parent components to child components, it's also important to note that they can be any data type.

It is imperative to understand that the syntax for creating a prop for any of your components. In React, you must use the same syntax for writing an attribute for an html tag. The way we specify a prop is by putting it within our element like this:

ParentPlant() {
  return <ChildPlant text="Hey Farmer! Says plant" number={2} isPlant={true} /> 
}

A good rule to remember when creating Props are: strings don't need to have curly braces around their value, we only do this for other data types. As you can see above we can have a multitude of props by assigning them to the parent component. When we have our props within our component it is important to know that we are technically passing them down. Once we pass our props down we need to be able to receive them within our desired component. In this case our ChildPlant component.

Receiving Props:

function ChildPlant(props) {
  return (
    <>
      {props.text} {props.number}
    </>
  )
}

We're doing to things here: 1. We are receiving our prop within the parameter of our ChildPlant component, 2. We are destructuring our prop's values via the name of our prop. It's important to know that our props isn't a parameter but more so functions similar to one.

The only way to pass parent component data down to it's child component is via props. I like to think of it like DNA, a parent component holds aspects of itself already existing within it. Because that child also can have aspects of it's parent's DNA, props works like the activator that makes that child's hair red, black, or blond.

Props are received in the child function and are sent via the parent function, but props can only be sent down and never sent back up. We can think of props as objects as well. This is because they essentially hold data in them akin to key:value pairs. To touch back on why they are similar to parameters is that they they are storing multiple objects within them. I like to think of the area where props are received as placeholders. They take up space for some object that we want to share with our component and swap out when we need them to, via destructuring and dot notation.

Here's a good way to visualize it:

Here we can visualize props holding everything within our square boxes, each one holding it's respective data value from our first example. Now we just use our destructuring method to grab the value of our prop. And that's how to use props in a nutshell!

The above is the detailed content of Props Basics: Part 1. For more information, please follow other related articles on the PHP Chinese website!