Props(properties), are a core concept in React.Js that allow us to pass data from one component to other. By this these play a vital role in creating more efficient and resuable components.
In this tutorial let’s explore what props are, how they work, and how to use them effectively in our web applications.
What are Props in React?
Props are a mechanism for passing data from parent component to its child.
“Props are immutable, which means that when we pass a prop to a child, that child can not modify the prop directly. This immutability ensures predictable data flow and helps in maintainace.”
We can call the props as the states of parent component. As we know that the states are internal to the component and can be changed within the component. So these can only be changed within the parent.
Passing Props in React:
Passing props to a child component is very simple. we can simply include the props as attributes in the JSX tag when rendering the child component.
Accessing Props
So in the above code we are passing two props, name and age to the child component. Ok now let’s see how we are gonna receive props in the child component.
To access the props we can use react’s props object. Props are accessed as key-value pairs, where the key is the prop name and the value is the data passed from the parent component.
Output:
Name: Junaid
Age: 25
In the above code, props.name refers to the value of the name(Junaid) prop passed from ParentComponent. Similarly props.age refers to the value of the age(25) from the parent.
Passing Functions as Props
As we know that we cannot change the props i.e they are immutable. So let say if we a button in the childComponet, on click of that we want to call some event or change the states(considering the above code)? How we are gonna do this? The solution is pretty simply: We can define the event handler in the parent component, and then pass that in the child just like before as we pass the name and age.
This enables child components to communicate with parent components and trigger actions based on user interactions. Here see the code:
In the child component we can use the same technique as before to invoke the method: props.handleClick. This will trigger the actual method updateName in the parent component.
In this way we can pass and invoke the eventHandler(methods) as props inside the child component. So, as the user clicks on the “Change Name” button, the onClick event triggers the eventHandler. The output look like this:
Output:
Name: Muhammad Junaid
Age: 25
Conclusion
Props play a crucial role in React by allowing us to pass data from parent to child as well as the eventhandler. This enables the communication among components. By understanding how to pass props, pass functions as props, we can develop powerful and flexible React applications. Happy coding!