I have a parent class ponent and a child functional ponent. How can we pass value from this type of child ponent to parent ponent - I have seen some examples that passes value from a child class ponent to parent class ponent.

Parent ponent

import React from "react";
import ChildComponent from "./ChildComponent/ChildComponent";

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [] // An index value is in this state
        };
    }

    render(){
        //can console log the return value from the ChildComponent here if needed 
        return(
            <React.Fragment>
                <ChildComponent indexval = {this.state.data.index} />                                
            </React.Fragment>
        )
    }
}

export default ParentComponent; 

A prop indexval is passed down to the child ponent which is a functional ponent as below

Child ponent

import React from 'react';;
import Button from './Button/Button';

function ChildComponent(props) {
    const newVal=(index) => {
        let retVal = index + 1; //the retValue need to pass to the parent ponent
    }
    return (
        <React.Fragment>
            <Button onClick={() => newVal(props.index)}>Click</Button>
        </React.Fragment>
    )
}

As you can notice that the ChildComponent has a value retVal that need to be passed to the parent ponent. How can we achieve this

I have a parent class ponent and a child functional ponent. How can we pass value from this type of child ponent to parent ponent - I have seen some examples that passes value from a child class ponent to parent class ponent.

Parent ponent

import React from "react";
import ChildComponent from "./ChildComponent/ChildComponent";

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [] // An index value is in this state
        };
    }

    render(){
        //can console log the return value from the ChildComponent here if needed 
        return(
            <React.Fragment>
                <ChildComponent indexval = {this.state.data.index} />                                
            </React.Fragment>
        )
    }
}

export default ParentComponent; 

A prop indexval is passed down to the child ponent which is a functional ponent as below

Child ponent

import React from 'react';;
import Button from './Button/Button';

function ChildComponent(props) {
    const newVal=(index) => {
        let retVal = index + 1; //the retValue need to pass to the parent ponent
    }
    return (
        <React.Fragment>
            <Button onClick={() => newVal(props.index)}>Click</Button>
        </React.Fragment>
    )
}

As you can notice that the ChildComponent has a value retVal that need to be passed to the parent ponent. How can we achieve this

• javascript
• reactjs

• You can either use a state management system like Redux/Flow/Flux or use a callback prop. Parent will pass a function as a callback. Child will call it when value is updated and pass updated value – Rajesh Commented Mar 2, 2020 at 10:47

3 Answers 3

Parent ponent

import React from "react";
import ChildComponent from "./ChildComponent/ChildComponent";

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [] // An index value is in this state
        };
    }

    handleClick = (value) => {
       // handle changes from child
       console.log(value)
    }
    render(){
        return(
            <React.Fragment>
             // 1. we pass function for child on props
                <ChildComponent handleClick={this.handleClick} indexval = {this.state.data.index} />                                
            </React.Fragment>
        )
    }
}

export default ParentComponent; 

Child ponent

import React from 'react';;
import Button from './Button/Button';

function ChildComponent(props) {
    const newVal=(index) => {
        let retVal = index + 1;
        // 2. do calculations and send it to parent
        props.handleClick(retVal);
    }
    return (
        <React.Fragment>
            <Button onClick={() => newVal(props.index)}>Click</Button>
        </React.Fragment>
    )
}

You can pass a dispatcher to the child ponent which in turn can call this dispatcher to pass the value you want to:

Parent class ponent:

import React from "react";
import ChildComponent from "./ChildComponent/ChildComponent";

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [] // An index value is in this state
        };
        this.updateParentState = this.updateParentState.bind(this);
    }
    // dispatcher to pass as a prop
    updateParentState(val){
      this.setState({index:val});
    }

    render(){
        //can console log the return value from the ChildComponent here if needed 
        return(
            <React.Fragment>
                <ChildComponent 
                      indexval = {this.state.data.index} 
                      updateParent={this.updateParentState} />
            </React.Fragment>
        )
    }
}

export default ParentComponent; 

Child ponent:

import React from 'react';
import Button from './Button/Button';

function ChildComponent(props) {

    const newVal=() => {
        return props.index + 1; //do it this way
    }
    return (
        <React.Fragment>
            <Button onClick={() => props.updateParent(newVal())}>Click</Button>
        </React.Fragment>
    )
}
export default ChildComponent;

This is sample to show how you can work with parent and child ponent.

class Parent extends React.Component {
  state={name:"Hello"}
  handleClick = () => {
    this.setState({name:"Wele to the world of React."})
  };
  render() {
    return (
      <div className="App">
        <Child name={this.state.name} handleClick={this.handleClick} />
      </div>
    );
  }
}
function Child({name, handleClick}){
    return (
      <div>
       <h2>{name}</h2>
       <button onClick={handleClick}>Change</button>
      </div>
    )
  }