The most popular front end JavaScript library in use today, React is used by startups, large corporations, and organizations of all types—including Netflix and The New York Times—both on their websites and mobile applications. Its main advantage over websites and apps developed using Angular is speed. Because of its improvements over rival JavaScript libraries, its popularity has increased exponentially.
This article will help you become familiar with React.js prop, one of the most important concepts of React. Props provide a way of passing information between components in React.
ReactJS follows a distinct approach to data flow and manipulation compared to other frameworks. This might make it difficult to understand its concepts (such as props, state, etc.) in the beginning. In this article, we'll focus on the React props feature and understand the methodology to use it.
To understand how props work, first, you need to have a general understanding of the concept of React's components.
Master the fundamentals of React for developing user interfaces like props and state with the React.js Training Course. Enroll now!
What are Props in ReactJS?
ReactJS being a component-based library, the user interface (UI) is divided into small, reusable pieces. These components might need to send data to each other in some scenarios, and passing data between the components is done by way of props. The term "props" stands for "properties" and is used for passing data from one component to another. As opposed to state in React, props are read-only. So, the data coming from a parent component can't be changed by the child component.
Now, let's take a look at how to use props in a React application.
Using Props in React
We follow three steps to implement props in a React application fully. These are:
- Define an attribute and its value
- Pass it to child component or components by using props
- Render the props data
Here, we have a parent component, including another child component:
|
class Parent extends Component { render() { return ( <h1> the parent component <Child /> </h1> ); } } |
Child component:
|
const ChildComponent = () => { return <p>Child 1</p>; }; class ParentComponent extends Component { render() { return ( <h1> the parent component <Child /> <Child /> <Child /> </h1> ); } } |
Here the component will output the same string multiple times, but we can also assign a different string to each output while calling the child component. Let's do that using the following steps:
1st Step: Defining Attribute and Data
We can assign data to React components while calling them in this way:
| <Child attr1={value} attr2={value}/> |
In our case, we will name the attribute as text and assign the string to it:
| <Child text={“I’m the 1st child”} /> |
Now that we've added the data, we need to pass the data through props.
2nd Step: Passing Data using Props
Now let's take the "Child 1" string and pass it by using props. Passing props is simple, and we can add props like we pass an argument to a function.
|
const Child = (props) => { return <p>Child 1</p>; }; |
"Props are arguments passed into React components."—w3school
Final Step: Rendering Props Data
Now we need to render props since we have already passed it to the child component as an argument:
|
const Child = (props) => { return <p>{props.text}</p>; }; |
|
class Parent extends Component { render() { return ( <h1> the parent component. <Child text={"Child 1"} /> <Child text={"Child 2"} /> <Child text={"Child 3"} /> </h1> ); } } |
Each child component now renders its prop data instead of just printing the same thing every time it's called. This is how we pass props from one component to another and enable the dynamicity of a React application.
Master the fundamentals of React—an important web framework for developing user interfaces—including JSX, props, state, and events with the React.js Training Course.
State vs. Props
Let's go through the fundamental differences between state and props:
| State | Props | |
| Use Case | State is used to store the data of the components that have to be rendered to the view | Props are used to pass data and event handlers to the children components |
| Mutability | State holds the data and can change over time | Props are immutable—once set, props can't be changed |
| Component | State can only be used in class components | Props can be used in both functional and class components |
| Updation | Event handlers generally update state | The parent component sets props for the children components |
And with that, we are now familiar with props, one of the most important concepts of React.
Summary
- Props stand for properties
- Props are passed to components like function arguments
- Props can be passed to components only via parent to child
- Props data is immutable (read-only)
Expand Your Career Opportunities and Master React Today
The sustained (and growing) popularity of React means employers are having a difficult time filling positions. This translates into lucrative career opportunities for those with the inclination to learn the necessary skills. Simplilearn's comprehensive React.js training course will help you master these in-demand skills and become career-ready. To learn more, check out the following video to get an in-depth understanding of React.js Props and our video lesson on ReactJS Props covering the key concepts of React in greater depth. Seize the future, and take control of your career opportunities today!
