In this article, we will discuss what props are and how to use them in React. Apart from being an essential concept, this is also a popular React interview question which you should not miss to prepare.
What are props in React.js?
As mentioned above, props in React are the input provided to a component. Props are read-only data. Basically, props are objects that are passed from a parent component to a child component. Props are immutable, meaning, they cannot be modified in a component.
Props can be used in class as well as functional components. The working of props is similar in both types of components. Let’s understand how to use props in React with examples.
By the way, this is the 8th article in my series of React.js for Beginners. If you have not read earlier articles then you also check out them to learn essential React concepts like
- how to do state management in React,
- useDispatch and useSelector example,
- What is Redux and why use it,
- lifecycle methods on functional components,
- what are React and Redux hooks,
- and useState hooks example etc.
If you are new to React world and need resources to learn React.js in a structured and guided way then you can also check out my recommended best React courses, websites, and books, which is a collection of many hands-on, project-based courses and books to learn to React in depth.
1. Props in Functional Components in React
Now, let's see code examples to learn pros in functional components in React.js
See the following code.
import Child from "./child";
function Parent() {
const name = "John";
const age = 27;
const city = "New York";
return (
<div>
<Child />
</div>
);
}
export default Parent;
In the above code, the “Child” component is being rendered in the “Parent” component. Now suppose, we wish to use the variables (name, age, and city) in the “Child” component. We can do this by passing them as props to the Child component.
Now, see the function.
function Parent() {
const name = "John";
const age = 27;
const city = "New York";
return (
<div>
<Child name={name} age={age} city={city} />
</div>
);
}
In the “Child” component, all the variables are passed one by one. We can name the properties whatever we want.
Now let’s see how these props can be used in the “Child” component.
function Child(props) {
console.log(props);
return <div></div>;
}
export default Child;
The following will be displayed in the console window.
{name: "John", age: 27, city: "New York"}
As mentioned earlier, the props sent from the parent component are available as objects in the child component.
Now, let’s access the props in the “Child” component.
function Child(props) {
return (
<div>
<h2> Name: {props.name} </h2>
<h2> Age: {props.age} </h2>
<h2> City: {props.city} </h2>
</div>
);
}
export default Child;
Output:
Name: John
Age: 25
City: NewYork
2. Props in class components in React.js
In class components, the props are passed in the same way as they are passed in functional components. But accessing them in the child component is a bit different. We have to create a constructor with a super() function call inside it to access the props.
Moreover, props are accessed using the “this” keyword.
The following code is equivalent to the earlier “Child” component that we created using a functional component.
import React from "react";
class Child extends React.Component {
constructor(props) {
super();
}
render() {
return (
<div>
<h2> Name: {this.props.name} </h2>
<h2> Age: {this.props.age} </h2>
<h2> City: {this.props.city} </h2>
</div>
);
}
}
export default Child;
3. Default props in React.js
React provides a very useful feature called default props. With default props, we can assign default values to the expected props. If the values are passed from the parent component, then the default values will be ignored but if not passed, then the default values will be assigned to them.
Let's see an example in the following code.
function Parent() {
const name = "John";
const age = 27;
const city = "New York";
return (
<div>
<Child />
</div>
);
}
The “Child” component is used in the parent component but no props are passed to it. But the “Child” component is expecting them.
function Child(props) {
console.log(props);
return (
<div>
<h2> Name: {props.name} </h2>
<h2> Age: {props.age} </h2>
<h2> City: {props.city} </h2>
</div>
);
}
export default Child;
Output:
Such a case will affect the component. To avoid such a situation, we should assign default props to the component.
function Child(props) {
console.log(props);
return (
<div>
<h2> Name: {props.name} </h2>
<h2> Age: {props.age} </h2>
<h2> City: {props.city} </h2>
</div>
);
}
Child.defaultProps = {
name: "XYZ",
age: "XYZ",
city: "XYZ"
};
export default Child;
Using the “defaultProps” property, we can create default props. Now let’s check the output.
That's all about what is props in React.js and how to use Props in React.js. Props are a simple but important concept in React application. In this article, we have seen how to pass properties or props from parent to child components as well as how to use pros in both functional and class components in React.js.
If you are going to be a React developer, then you must understand the working of props. In this article, we discussed props in functional as well as class components. We also discuss the concept of default props.
Other React and Web development Articles and resources you may like
- My favorite books to learn React.js
- 5 Best courses to learn React Native
- 5 Courses to learn Object-Oriented Programming for Free
- The Frontend and Backend Developer RoadMap
- 5 Courses to Learn Ruby and Rails for Free
- 10 Books and Courses to learn Angular
- My favorite free Courses to learn Angular and React
- 5 Free Docker Courses for Java and DevOps Engineer
- 5 Online training courses to learn Angular for Free
- 3 Books and Courses to Learn RESTful Web Services in Java
Thanks for reading this article so far. If you like this React
Props tutorial then please share them with your friends and colleagues.
If you have any questions or feedback, then please drop a comment.
No comments:
Post a Comment