React is a JavaScript library created and maintained by Meta used for building user interfaces. It is known for its component-based architecture, which allows developers to create reusable and modular code. Props are one of the most important tools to use in React components.
What are props?
In React, props are a way to pass data from a parent component to a child component. They allow components to be customized and constructed in different ways, without the need to rewrite the component's code.
For example:
Imagine you have a parent component called "Home" and a child component called "BlogList" that displays a list of blogs. The actual list of blogs is defined in the Home component in the form of an array of objects:
The BlogList component is the child component that maps over the array of blogs and displays each individual blog. We want to access the blog list array instead of having to copy the code from the Home component into the BlogList component:
We pass in props as an argument to BlogList and render the blogs array properties to a constant variable. By doing so, we can access the blogs array and use dot notation to access its key values.
To make sure that our new, mapped array renders, we need to return the child component, BlogList, in the parent component, Home, and pass the props as attributes:
Instead of creating a constant variable for blogs and setting it to props.blogs, another way to access props is to simply pass props as an argument and access the values using dot notation, such as props.blogs.value. While either will work, there is a way to refactor our code and make it shorter and simpler to read.
Destructuring
A more effective way to pass in props as an argument is to destructure the props object. Destructuring props takes the keys from the object and creates variables with the same names. The value associated with the key is saved in the corresponding variable so it can be directly accessed.
This also makes it easier to tell what props are being passed down to a component. In the above example, we know exactly what values are being accessed into the BlogList component instead of having to look for through the entire component for each prop reference.
In the Home component, the title attribute is set to a string and passed down as a prop to BlogList as a header for our blogs array:
Our blog, with a little CSS, would end up looking like this:
In the case that there is no value for a prop that is being passed as an argument, it is possible to set a default value for a prop. In the above example, if there was no title data, we could set the title to default to whatever we saw fit by simply assigning it a default value using an equal sign. (I.e. function BlogList({ title = "whatever" })).
Props can be used to customize components in a wide variety of ways. Here are some common examples:
- Setting text, labels, and captions: Props can be used to set the text or label of a component.
- Controlling behavior: Props can be used to control the behavior of a component. For example, you could pass a prop to a Modal component to specify whether it should be displayed or hidden.
- Styling: Props can be used to apply styles to a component. For example, you could pass a prop to a Button component to specify its color or size.
- Data: Props can be used to pass data to a component. As in the above example, you could pass an array of items to a List component to be rendered as a series of list items.
Conclusion
Props are an important part of React's component-based architecture, as they allow components to be composed and reused in different contexts. By passing different props to a component, you can create variations of that component that can be used in different parts of your application without having to rewrite the component's code.
Top comments (0)