Unable to pass data from Child Functional Component to React Parent Component (React.js) [duplicate]

Question

I am building an Autocomplete component in react so I can render individual autocomplete(s) in a single page; I want to render the suggestions from Autocomplete in a separate component.

I tried using

class Parent extends Component {

    getData = (data) => {
        if (data) return data;
    };

    render () {
        <AutoComplete passData={this.getData} />
        // after some other elements
        {this.getData()}
    }

}

and

export const Child = (props) => {
    ...
    const updateSuggestion = (suggestions) => {
        this.props.passData(suggestions);
    }
}

But somehow, it's failing me. To confuse me even more, if I just console.log the retrieved data using the code below, it works perfectly!

getData = (data) => {
    if (data) console.log(data);
};

To complicate things even further, it fails me even if I return a hard-coded element:

getData = (data) => {
    if (data) return <p>Hello</p>;
};

Although it works when I remove if (data)

I'm completely lost as to what's happening here and would appreciate the slightest of help!

P.S. By "failing me", I mean it doesn't return anything at all — Muneeb Naveed
– Muneeb Naveed, Commented Jun 4, 2020 at 19:04
this.props.passData(suggestions); don't use this in functional component like Child. It gets props as a paramater so it should be props.passData(suggestions);. :) — Deykun
– Deykun, Commented Jun 4, 2020 at 19:08
@Deykun I just updated my code and it seems like the data is flowing to the Parent Class but there's one more problem: it only works when I console.log(suggestions) but not with return suggestions — Muneeb Naveed
– Muneeb Naveed, Commented Jun 4, 2020 at 19:17

kaushal patel · Accepted Answer · 2020-06-04 19:28:53Z

0

You can't use

{this.getData()}

when component will render for first time these {this.getData()} will not have data

Instead of returning data you need to use state method that will that will render component again so that your data will show up on inside render see this Post enter link description here

answered Jun 4, 2020 at 19:28

kaushal patel

655 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to pass data from Child Functional Component to React Parent Component (React.js) [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related