How to pass value from a child functional component to parent class component?

user_11496645 0
Viewed 4107

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

Parent component

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 component which is a functional component as below

Child component

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 component
    }
    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 component. How can we achieve this

reactjs javascript
3 Answers

Parent component

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 component

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>
    )
}
user_128827230

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

Parent class component:

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 component:

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;
user_10591010

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

class Parent extends React.Component {
  state={name:"Hello"}
  handleClick = () => {
    this.setState({name:"Welcome 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>
    )
  }
user_65444600
Related