More

    How to pass props to components in Reactjs?

    Props in ReactJS

    Every application that is developed in ReactJS is made of components. The process of breaking the code into smaller components in ReactJS helps to split the UI into independent, reusable pieces, and we can think about each piece in isolation. Sometimes, components need to share data with each other. The process of passing data between components is handled by “props”.

    Props stand for properties in React. Props help to pass data from one component to another in React. React is pretty flexible but there is one strict rule: The props data coming from one component to the other cannot be modified/changed. All React components must act like pure functions with respect to their props.

    Let’s consider a class-based component as an example to understand the concept of props:

    import React from 'react'
    
    class Vehicles extends React.Component {
    
     render() {
    
       const Car = "Maruti 800";
    
       return (
    
         <div>{Car}</div>
    
       );
    
     }
    
    }
    
    export default Vehicles;

    Output: Maruti 800

    In the above example, we are simply rendering a variable (e.g. Car in the above Vehicles component) that is declared in the same component. This may not always be the case. At times, we may need to create separate components to render a particular DOM element. Let’s take another example for this case.

    import React from "react";
    
    class Vehicles extends React.Component {
    
     render() {
    
       return (
    
         <div>
    
           <p>This is from vehicles component</p>
    
           <Car />
    
         </div>
    
       );
    
     }
    
    }
    
    class Car extends React.Component {
    
     render() {
    
       const Car = "Maruti 800";
    
       return <div>{Car}</div>;
    
     }
    
    }
    
    export default Vehicles;

    Output: 

    This is from the vehicles component

    Maruti 800

     

    In the above example, we created two separate components and rendered the value of the Car component from the Vehicles component. The component (Vehicles in this case) which renders another component (Car) is called the parent component and the component which is getting rendered by nesting in another component is called the child component. In this example, we are simply rendering the child component from the parent component.

     

    Passing props from Parent to Child components

    But, that is not the sole purpose of creating components. In React components are created to make the maximum use of the code and reuse all the parts of code that may get repeated in other parts. For this purpose, the concept of props was introduced in React. Using props (which stands for properties) in React, we can pass some value in the form of objects from a parent component to a child component. These values can be accessed inside a class-based child component using this.props and in the functional component, we can simply accept the value of props or destructure the props value while defining the function. Let’s have a look at another example where we can pass props from one component to another in ReactJS:

    Let’s take another example of a class-based component where we can pass props from a parent component to a child component:

    import React from "react";
    
    class Vehicles extends React.Component {
    
     render() {
    
       return (
    
         <div>
    
           <p>This is from vehicles component</p>
    
           <Car name={"Maruti 800"} />
    
           <Car name={"Honda Amaze"} />
    
         </div>
    
       );
    
     }
    
    }
    
    class Car extends React.Component {
    
     render() {
    
       return <div>{this.props.name}</div>;
    
     }
    
    }
    
    export default Vehicles;

    Output: 

    This is from the vehicles component

    Maruti 800

    Honda Amaze

    In the above example of a class-based component, we are passing names as props to the Car component from the parent i.e Vehicles component. This “name” property can eventually be used in the child by using this.props.name as depicted in the example above. We can also perform this action using the functional component. Now, let’s see an example to see how we can do this by using the functional component:

    import React from "react";
    
    const Vehicles = () => {
    
     return (
    
       <div>
    
         <p>This is from vehicles component</p>
    
         <Car name={"Maruti 800"} />
    
         <Car name={"Honda Amaze"} />
    
       </div>
    
     );
    
    };
    
    const Car = (props) => {
    
     return <div>{props.name}</div>;
    
    };
    
    export default Vehicles;

    Output: 

    This is from the vehicles component

    Maruti 800

    Honda Amaze

    In this example, we used a functional component of ReactJS to see how we can receive props as parameters in the child component and display the data. We can also destructure the name property while receiving the props as a parameter. But this may only be required if the number of props values are limited for better code readability else we can do that in whatever way according to personal choice.

     

    Passing data from Child component to Parent Component:

    In the above examples, we saw how we can pass data from a parent component to a child component. But what if we need to pass some values from child to parents? Well, there is not any specific method to pass props directly from child to parents but we can use callbacks to pass the values from a child component to its parent component. We can pass functions from the parents to the child components. The child components can then make use of these functions to pass any value to its parent. The function can then change/update a state in the parent component which will result in re-rendering of the respective changed components.

    Let’s try to understand this with an example.

    import React, {useState} from "react";
    
    const Parent = () => {
    
     const [inputValue, setInputValue] = useState("");
    
     const parentFunction = (data) => {
    
       setInputValue(data);
    
     };
    
     return (
    
       <div>
    
         <p>This is from vehicles component</p>
    
         {inputValue && <div>{inputValue}</div>}
    
         <Child parentFunction={parentFunction} />
    
       </div>
    
     );
    
    };
    
    const Child = (props) => {
    
     return (
    
       <div>
    
         <input
    
           name="data"
    
           onChange={(e) => props.parentFunction(e.target.value)}
    
         />
    
       </div>
    
     );
    
    };
    
    export default Parent;

     

    In the above example, we are passing a function as props to the child component. This function is getting invoked from the child component whenever the input value changes. When the value inside the input box is changed this callback function gets invoked and passes the value of the input box to the function as an argument. In this way we are passing value from a child component i.e input box in this case to the parent component and this value is eventually used in the parent to update the state and render the updated input value to the DOM.

     

    Conclusion:

    In the above examples, we saw what props are and how we can pass props from one component to another. Using props in react components help a lot to improve the code reusability in ReactJS but we must understand how the props are passed among components. If the props are nested too deep in the components, then that may cause some memory leaks in the application. In such scenarios, we can consider using Context APIs or other state management libraries like Redux. But for passing data among fewer components, props are the best way to go with.

    Recent Articles

    React Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here