Pass props to parent component in React.js

React.js is a popular JavaScript library for building user interfaces. It allows you to create reusable components that can be composed together to build complex UIs. One common requirement in React.js is the need to pass data from a child component to its parent component. In this blog post, we will explore different ways to achieve this in React.js.

1. Using Callback Functions

One way to pass props from a child component to its parent component is by using callback functions. The parent component can define a callback function and pass it as a prop to the child component. The child component can then invoke the callback function and pass the required data as an argument.

    // ParentComponent.js
    import React, { useState } from 'react';
    import ChildComponent from './ChildComponent';

    function ParentComponent() {
      const [data, setData] = useState('');

      const handleDataChange = (newData) => {
        setData(newData);
      };

      return (
        

          
          Data received from child component: {data}
        
      );
    }

    export default ParentComponent;
  

    // ChildComponent.js
    import React, { useState } from 'react';

    function ChildComponent({ onDataChange }) {
      const [inputValue, setInputValue] = useState('');

      const handleInputChange = (event) => {
        const newValue = event.target.value;
        setInputValue(newValue);
        onDataChange(newValue);
      };

      return (
        

          
        
      );
    }

    export default ChildComponent;
  

In this example, the parent component ParentComponent defines a state variable data and a callback function handleDataChange. The child component ChildComponent receives the onDataChange prop and invokes it whenever the input value changes. The parent component updates its state with the new data and renders it.

2. Using Context API

Another way to pass props from a child component to its parent component is by using the Context API provided by React.js. The Context API allows you to share data between components without passing props explicitly through the component tree.

    // DataContext.js
    import React from 'react';

    const DataContext = React.createContext();

    export default DataContext;
  

    // ParentComponent.js
    import React, { useState } from 'react';
    import ChildComponent from './ChildComponent';
    import DataContext from './DataContext';

    function ParentComponent() {
      const [data, setData] = useState('');

      const handleDataChange = (newData) => {
        setData(newData);
      };

      return (
        
          
          Data received from child component: {data}
        
      );
    }

    export default ParentComponent;
  

    // ChildComponent.js
    import React, { useContext, useState } from 'react';
    import DataContext from './DataContext';

    function ChildComponent() {
      const onDataChange = useContext(DataContext);
      const [inputValue, setInputValue] = useState('');

      const handleInputChange = (event) => {
        const newValue = event.target.value;
        setInputValue(newValue);
        onDataChange(newValue);
      };

      return (
        

          
        
      );
    }

    export default ChildComponent;
  

In this example, the parent component ParentComponent creates a context using React.createContext() and provides the handleDataChange function as the value. The child component ChildComponent consumes the context using useContext(DataContext) and invokes the onDataChange function whenever the input value changes.

These are two common ways to pass props from a child component to its parent component in React.js. Depending on your specific use case, you can choose the approach that best fits your needs.