Passing child component data to parent using props

Question

I am completely new to ReactJS. I have a component (Component A) where I want to click a button and fetch a token from an API using AJAX call. Once the fetch is successful I need to pass it to another component (Component B) and render it conditionally (https://reactjs.org/docs/conditional-rendering.html).

Both Component A and B are nested within a single parent component and should render conditionally.

class Parent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <ComponentA />
        or
        <ComponentB>
      </div>
    );
  }
}

Expected result:

ComponentA should fetch the token within itself and pass to its Parent, there by notifying to replace ComponentA and render ComponentB.

Code I tried:

I took an example from here: https://codepen.io/gaearon/pen/QKzAgB?editors=0010 and How to pass data from child component to its parent in ReactJS? and wrote the below code.

class ComponentA extends React.Component {
    constructor(props){
      super(props);
      this.handleGenerateToken = this.handleGenerateToken.bind(this);
    }

    handleGenerateToken(){
      console.log("gen token");
      axios({ 
        method: 'post',
        url: 'https://<token_url>',
        mode: 'no-cors'
      }).then((result) => {
        if(result.status === 200){
          console.log({token:result.data});
          this.props.onGenerateToken({token:result.data}); //it fails here
        }else{
          console.log("Error generating token. Status code: " + result.status);
        }
      });
    }

    render(){
      return(
        <div>
          <div id="details" className="div-center">
            some ui
            <div>
            <a id="btnStart" onClick={this.handleGenerateToken} className="waves-effect waves-light btn secondary-content">Start</a>
            <a id="btnReset" className="waves-effect waves-grey btn blue-grey lighten-5 black-text outline secondary-content">Reset</a>
            </div>
          </div>
        </div>
      );
    }
}

Problem is I get the token but unable to set it to the props using this.props. I get below which seems like this is not accessible.

Uncaught (in promise) TypeError: _this4.props.onGenerateToken is not a function at :182:26

I tried creating an extra variable _self and assign this outside the Promise scope of the AJAX call but that didn't work.

I am not sure if I am doing this correctly. Please let me know if I can explain in more detail.

You need to show the code where your component is used (`onGenerateToken` is probably undefined or something else that's not a function)! Also, `console.log(this.props)` — ThiefMaster, Apr 23 '19 at 13:54
Check `onGenerateToken` is a prop in another component. Also check where this is pointing in that context — Meet Zaveri, Apr 23 '19 at 13:56
@ThiefMaster It is not defined. I thought I can use it just like that and pick it up from parent component. — Souvik Ghosh, Apr 23 '19 at 13:57
You must pass a function in the onGenerateToken prop to this component where you actually use it, should look something like `` — JimboSlice, Apr 23 '19 at 14:00
@SouvikGhosh Okay I have posted an answer. Please check if you find something useful — Meet Zaveri, Apr 23 '19 at 14:09

Meet Zaveri · Accepted Answer · 2019-04-24T10:51:53.113

1

A simple example :

Let <ComponentA/> be your component:

 handleGenerateToken(){
  console.log("gen token");
  axios({ 
    method: 'post',
    url: 'https://<token_url>',
    mode: 'no-cors'
  }).then((result) => {
    if(result.status === 200){
      console.log({token:result.data});
      this.props.onGenerateToken({token:result.data}); //it will have a handler in wrapper(parent) component
    }else{
      console.log("Error generating token. Status code: " + result.status);
    }
  });
}

Let <Parent/> be the component you have wrapped this <ComponentA/> and <ComponentB/>. Conditionally render components on basis of boolean like flag isTokenAvailable defined in state

In <Parent/>'s render method :

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isTokenAvailable: false,
            token:null
        };
    }

    render() {
        const isTokenAvailable = this.state.isTokenAvailable;
        return (
            <div>
                {isTokenAvailable ? (
                    <ComponentB />
                ) : (
                    <ComponentA
                        onGenerateToken={(token) => {
                            this.setState({ isTokenAvailable: true, token });
                        }}
                    />
                )}
            </div>
        );
    }
}

edited Apr 24 '19 at 10:51

answered Apr 23 '19 at 14:08

Meet Zaveri

2,921
1
22
33

I have updated my question and added more details to simplify it. Can you please check? – Souvik Ghosh Apr 24 '19 at 10:31
@SouvikGhosh I have updated the answer. Can you check and confirm if its helpful? – Meet Zaveri Apr 24 '19 at 10:54
It works. So, I am trying to pass `token` from `this.state.token` to `ComponentB` like `` but it doesn't seem to work. – Souvik Ghosh Apr 24 '19 at 11:29
What's the value being shownig `` component ? Is it null or actual value ? – Meet Zaveri Apr 24 '19 at 11:30
I have explained in the updated details. Can you please check? – Souvik Ghosh Apr 25 '19 at 06:26
nevermind. it's working. had to use `this.setState`. – Souvik Ghosh Apr 25 '19 at 09:25

Dorian Mazur · Answer 2 · 2019-04-24T10:35:02.213

0

Change this.handleGenerateToken to this.handleGenerateToken() or handleGenerateToken(){ to handleGenerateToken = () => {

And instead of changing props, just use state :)

state = { token: undefined };
constructor(props){
      super(props);
      this.handleGenerateToken = this.handleGenerateToken.bind(this);
}

and then just simply

this.setstate({token:result.data});

Then you can render it conditionaly

render(){
if(this.state.token === undefined){
   return <Text>Oh, Token is undefined</Text>
}
   return <Text>Token is defined</Text>
}

edited Apr 24 '19 at 10:35

answered Apr 23 '19 at 14:02

Dorian Mazur

514
2
12

I have updated my question and added more details to simplify it. Can you please check? – Souvik Ghosh Apr 24 '19 at 10:30
@SouvikGhosh Change `this.handleGenerateToken` to `this.handleGenerateToken()` or `handleGenerateToken(){` to `handleGenerateToken = () => {` – Dorian Mazur Apr 24 '19 at 10:33
The token which you have set is actually generated from a child component. You can only set the state when you have the token in the parent component. So how do you pass the token from child to parent? – Souvik Ghosh Apr 24 '19 at 10:50

score 0 · Answer 3 · answered Apr 23 '19 at 14:04

0

react doc

change

handleGenerateToken(){

to

handleGenerateToken = () => {

answered Apr 23 '19 at 14:04

SIMDD

615
5
15

I have updated my question and added more details to simplify it. Can you please check? – Souvik Ghosh Apr 24 '19 at 10:30

Passing child component data to parent using props

3 Answers3