Introduction
In React, we always think about Components. These components need a way to communicate with each other. Props are a great way to communicate between components by sharing data between them. It is unidirectional. That means you can only pass data from the Parent to the Child component, not vice-versa. Passing data using Props is a two-step process:
- Passing Props to Child Component
- Read Props inside the Child Component
Passing Props to Child Component
Firstly, you need to pass the Props while calling the component. In HTML, attributes like src
, height
, and width
are used for the <img>
tag. In the same way, Props are used for React components. Here we can pass data using custom attribute names and provide them with any value.
import ProfileCard from " . /components/ProfileCard.jsx";
const App = () => {
const person = {
name: 'John Doe',
age: 28
};
return (
<div>
<ProfileCard name={person.name} age={person.age}/>
</div>
)
}
export default App;
Read Props inside the Child Component
Secondly, You need to handle the Props in the Child component. In React, every Component gets a props
object as a parameter in its definition function. With this object, we can declare any custom property to the component. In the following example, we have called the props
object as parameter in the component definition. And in JSX, we used the props.name
to refer to the name
attribute. The same goes for age
also.
const ProfileCard = (props) => {
return (
<div className='card'>
<div className='card-header'>
<h2>{props.name}</h2>
</div>
<div className='card-body'>
<p>Age is: {props.age}</p>
</div>
</div>
)
}
export default ProfileCard;
Children: A Special Prop
With the current example, we can only pass props
as attributes. But if you don’t know about the content inside of the component. Consider you have a card component and the content inside that card you don’t know. In React, we encounter a lot of these presentational components, where we use them as wrapper components. For this, we can use the children
props. Just use props.children
in the function definition. Put any HTML content inside of the component while calling it.
const Card = (props) => {
return (
<div className='card'>
{props.children}
</div>
)
}
export default ProfileCard;
Destructuring Props
Till now, we have written props
and then its properties using the keys of the props
object. But as the component grows, it is hard to manage. Instead, we can use object destructuring to define props. With that, you don’t need to use the props
word multiple times. As a result, the code will be much clean and readable.
const ProfileCard = ({name, age}) => {
return (
<div className='card'>
<div className='card-header'>
<h2>{name}</h2>
</div>
<div className='card-body'>
<p>Age is: {age}</p>
</div>
</div>
)
}
export default ProfileCard;
Passing Data from Child to Parent using Props
Props are unidirectional. How can we pass data from the Child to the Parent component? There is a way we can do it. We can’t pass the Child component’s data directly to Parent Component. But, by using functions as Props, we can do it. Firstly, We need to pass an argument in the Child component. Then, declare a function in the Parent component to handle that argument.
const Button = ({themeHandler}) =>
return (
<div>
<Button onClick={() => {themeHandler('dark')}}/>
</div>
)
}
export default Button;
import Button from ". /components/Button.jsx";
const App = () => {
const [theme, setTheme] = useState('light');
const themeHandler = (theme) => {
setTheme(theme);
}
return (
<div>
<h2>Current Theme: {theme}</h2>
<Button themeHandler={themeHandler} />
</div>
)
}
export default App;
Summary
In this article, we discussed: What is Props, How to declare it, Destructuring Props, Children Props and Passing Data from Child to Parent Props. Props are the basic building block of React ecosystem. Follow me to learn more about React and other Frontend Development skills.
Top comments (0)