Introduction
React applications are developed using independent and reusable components. These components can be nested within another component, thereby creating parent and child components.
The purpose of this tutorial is on props. Props is an important React tool that helps with the flow of data from the parent component to the child component(s). Props enable the development of dynamic data and styles for reusable child components. You don’t have to repeat yourself creating multiple components for different styles and data.
This tutorial provides a basic insight into props. As you study through this tutorial, you will learn the meaning of props with practical examples of applying props to your application.
Furthermore, you will get to understand what parent and child components mean, the features of props, and benefits as well. Don’t worry if you are confused about when to use props. This tutorial has you covered. You will learn the purpose of props and when to apply them in your application.
This tutorial targets beginners as well as mid-react developers who want to improve their understanding of what props entail.
Prerequisite
To get a better understanding of this tutorial, you should be conversant with basic React structures such as components. You should know the use of components and how to create them.
Also, you should be familiar with basic JavaScript tools such as object, and object destructuring.
Your familiarity with the above terms and tools will further boost your understanding of this tutorial.
Table of contents
- What is Props?
- What is the parent and child component?
- Features of props
- Benefits of using props
- How to apply props
- When to apply props
What is Props?
Props stand for properties. They are arguments passed to React components and return as an object. Props enables you to store and pass data from the parent component to the child component(s).
A parent component can call and render a child component multiple times. Thus, using props enables you to create dynamic content and styles for each reusable child component.
Props are immutable i.e., they are read-only and cannot be updated or modified upon user request.
To better understand props, let’s take a look at HTML element attributes. Note that HTML element attributes can also be referred to as properties. They work similarly to props, but props are passed as an argument to components.
Examine the HTML example below.
<img src="/imagesrc" height="20px" width="20px">
The img tag contains some attributes–src, height, and width. These attributes determine what image and how the image will be displayed on the browser.
Now, examine the React component–Greetings–below.
function Greetings(props){
return(
<h1>{props.text}</h1>
)
}
The above React component accepts an argument–props, which can be any name of your choice. Next, props is returned as an object with the dot (.) notation, and text value.
function App(){
return(
<Greetings text='Welcome' />
)
}
Furthermore, another component–the App component above–calls and renders the Greetings component with a text attribute assigned to a string value–Welcome.
Hence, the above codes will display Welcome as a heading on your browser.
Thus, Props functionality enables the easy flow of data from the parent component to the child component(s). The Parent component through props determines what the child component(s) displays and how the child component(s) will be displayed on the browser.
What is the parent and child component?
Components is a core structure of the React application. Components are independent and reusable JavaScript codes used in creating user interfaces with React.
The App.js file is an example of a React component. The App.js file is the root component that calls and renders other components on the browser. This makes the App.js file a parent component to all other components.
A parent component is any component that contains one or more nested component(s). In other words, a parent component calls and renders another component(s).
A child component is a component that is nested within another component. In other words, a child component is called and rendered in another component.
The below code example identifies a parent and a child component.
function ChildComponent(){
return(
<p>This is a child component</p>
)
}
function ParentComponent(){
return(
<ChildComponent />
)
}
The above example contains two components–ParentComponent and ChildComponent. The ParentComponent calls and renders the ChildComponent, making the ChildComponent nested within the ParentComponent.
Features of props
Below are some notable features of props that are important to know.
Immutable: Props are immutable. In other words, props are read-only and cannot be modified or updated upon user request. Thus, what is displayed on the browser remains static and unchanged.
The uni-directional flow of data: Props pass data in a one-way flow i.e. from the parent component to the child component(s). Thus, the child component(s) only receives data and cannot pass data to the parent component.
Component’s argument: Props are passed as an argument in React components and returned as an object with the dot notation.
Benefits of using props
Props is a helpful tool when creating React components. Below are some of the benefits of using props.
Easy flow of data: Props create a means of connection and communication between two or more components i.e. the parent and child components. Thus, props enable the easy flow of data from one component (the parent component) to another (the child component(s)).
Dynamic contents: Props allow you to render different data and styles for your reusable component. For instance, a component can be reused multiple times with each containing different contents and styles.
Fewer codes: Instead of creating multiple components with their unique contents, props allow you to create a single and reusable child component. Each reusable component can contain its unique contents, thereby reducing the amount of codes to be written.
How to apply props with practical examples
In this section, let’s further examine and learn how to apply props in React applications.
The App.js file is where we shall be writing all our codes.
Please note that you can also create components by creating a new ‘.js’ file in the src directory. In this case, the created component will be exported and then imported into the parent component or the App.js file.
But for this tutorial, all components will be created in the App.js file.
Also, note that all components must begin with a capital alphabet. This is the standard way of creating components according to the official doc of React. Read more about React components here.
Let’s get started
In the App.js file, create an Item component with props passed as its argument. Then return an object just as the code example below.
function Item(props){
return(
<p>Product name: {props.name}</p>
)
}
Next, in the return method of the App.js component, insert the below codes to render the Item component.
function App() {
return (
<div className="App">
<Item name='Cars' />
</div>
);
}
The Item component becomes the child component of the App component—which then becomes the parent component. The App component calls and renders the Item component while also passing the value for name.
Below is the complete code for the App.js file.
import React from 'react';
import './App.css';
function Item(props){
return(
<h3>Item name: {props.name}</h3>
)
}
function App() {
return (
<div className="App">
<Item name='Cars' />
</div>
);
}
export default App;
Save your work and start your server. Open your browser and the below image displays on your screen.
Props also enable you to apply different data to each reusable child component. See the code example below.
import React from 'react';
import './App.css';
function Item(props){
return(
<h3>Item name: {props.name}</h3>
)
}
function App() {
return (
<div className="App">
<Item name='Car' />
<Item name='Phone' />
<Item name='Computer' />
<Item name='Table' />
</div>
);
}
export default App;
The above code shows Item component reused multiple times with different values for the name attribute.
You can further create dynamic styles for each reusable child component. See the code example below.
import React from 'react';
import './App.css';
function Item(props){
return(
<h3 style={props.style}>Item name: {props.name}</h3>
)
}
function App() {
return (
<div className="App">
<Item name='Car' style={{color: 'green'}} />
<Item name='Phone' style={{color: 'red'}} />
<Item name='Computer' style={{color: 'blue'}} />
<Item name='Table' style={{color: 'grey'}} />
</div>
);
}
export default App;
In the above code, the child component–Item returned a {props.style} object assigned to the style attribute in the h3 tag. Next, the parent component calls the child component multiple times with each containing a style attribute with different styles.
Note that CSS styles for props value must be an object.
When to apply props
You must be wondering when to apply props in your application. The following points give us basic insight on when to apply props.
Mutability of data
Props deal with immutable data i.e. read-only data. Thus, as a developer, you need to understand the nature of your data before you apply props in your component. If your data is mutable, then there are other React tools to use. But if your data is immutable, props can be applied to your component.Nature of Component
A developer also needs to understand the nature of your component before you can use props in your application. If your component is reusable and will contain different static contents, props is a good choice to use.
Conclusion
In summary, props is a great React tool that connects the parent and the child component(s). Props ensure the flow of data from the parent to the child component(s) and also enable dynamic rendering of contents and styles for reusable components.
Thus, this tutorial walked us through the basic insight into what props entail. We looked at the meaning, features and benefits of props. We also study what the parent and child component means in general, and we learn when to apply props in our application.
I hope through this tutorial, you can now understand and apply props with ease in your React application. Kudos for adding another knowledge to your React skills. Explore other React tools as well such as states, hooks and amongst others.
Top comments (0)