CODEWITHSUNDEEP
reactjs
user10742206
user10742206

Reputation:

Update parent component State from child component in react js

I am setting a state into child component on event perform and want to sent this to Parent component. I searched for this on SO. But still didn't found any way to do this.

Let say i have a parent component Home, and have child component User. I am performing some event in User component, and at that time, i want to pass data to Home component. How can i do this?

Below is my code:

/* Parent component */

import React, { Component } from 'react';
import User from './user';

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
           isReportSent: false
        }   
    }
    render(){
        <Switch>
           <Route exact path="/" component={User}/>
        </Switch>
    }
}

/* child component */
class User extends React.Component{
    constructor(props){
        super(props)
    }
    render(){

    }
}

Note: My parent component is Routing component, in which i am routing my child component on particular path. So can't pass any function to child component.

Upvotes: 2

Views: 4708

Answers (5)

Antier Solutions
Antier Solutions

Reputation: 1402

@user10742206 The best way is to create an independent component and include it as a child in any parent component. Then you can pass a callback function from parent and child can use it to send back any data to parent.

Upvotes: 0

Ajay Singh Beniwal
Ajay Singh Beniwal

Reputation: 19037

Your explanation is not all clear what you want to acheive but as a simple pattern you can pass the callback prop to the child component using render method of react router

Parent Component 

<Route exact path="/" render={(props) => <User {...props} callback={this.callback} />}/>

Child Class

this.props.callback(data)

Upvotes: 0

Chetan Singhal
Chetan Singhal

Reputation: 124

You can call callback function of parent from child component and in parent you can set the state based on callback response.

import React, { Component } from "react";

class Home extends Component {
    constructor(props) {
      super(props);
      this.state = { }
    }
    setStateOfParent= result => {
      this.setState({result : result});
    }

    render() {
      return <User setStateOfParent={this.setStateOfParent} />;
    }
}

class User extends Component {
   constructor(props) {
     super(props);
     this.state = {};
     this.API = "https://apicall";
   }

   makeAnAPICall = async () => {
     let result = await fetch(this.API);
     this.props.setStateOfParent(result);
   };

   render() {
     return <button onClick={this.makeAnAPICall}>API Call</button>;
   }
}

export default Home;

Upvotes: 0

user8211511
user8211511

Reputation: 31

import React, { Component } from "react";
class Home extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
    onChildAPICall = result => {
      console.log(result);
    };

    render() {
      return <User onAPICall={this.onChildAPICall} />;
    }
}

class User extends Component {
   constructor(props) {
     super(props);
     this.state = {};
     this.API = "https://apicall";
   }

   makeAnAPICall = async () => {
     let result = await fetch(this.API);
     this.props.onAPICall(result);
   };

   render() {
     return <button onClick={this.makeAnAPICall}>API Call</button>;
   }
}

export default Home;

Upvotes: 3

jsw324
jsw324

Reputation: 812

Something like this would work. I'm not sure if the below is 100% functioning as I just wrote it quickly but the idea is to pass down setState() as a prop from parent to child. So when child calls setState from props it's setting state in the parent component.

 class Home extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      data: []
    }
  }

  render () {
    <ChilComponent setState={this.setState} />
  }
}

const User = async ({ setState }) => {
  const receivedData = await getDataHowever(params)
  setState({
    data: receivedData
  })
  return (
  <p>Got data!</p>
  )
}

Upvotes: 1

Related Questions