Passing props to parent

Question

I'm trying to use a value that is generated within a function in child.js and pass this to parent.js so I can use this value to filter the array of children.

Child.js

const returnDistance = () => {
            const dist = getDistance(userLat, userLng, lat, lng).toFixed(1);
            this.props.onCalculateDistance(dist);
            return dist;
        }

return dist is the value that is generated that I need to access within parent.js

Parent.js

// The callback function
    distanceChange = (dist) => {
            console.log(dist)
            return dist;
    }

//The map to render child.js data. Im passing distanceChange as a prop.
{filteredResults.filter(({ node }) => (node.onCalculateDistance >= 0)).map(({ node }) => {
    return (
        <SpaceWrapper key={node.id}>
            <Space node={node} onCalculateDistance={this.distanceChange} />
        </SpaceWrapper>
    )
}
)}

Am I missing something glaringly obvious here? The console.log for distanceChange returns all of the values for the child.js nodes but returns undefined when used as a prop.

How do I get the function to run so I can filter the results with the returned value?

Thanks

Not sure what you are doing with below code , Do you want to check the node.dist? `node.onCalculateDistance >= 0` — Atul, Mar 21 '19 at 21:13
So that's just a verbose example but I'm attempting to filter out results that will be greater than 5 for instance, but I'm getting confused somewhere and can't work out how to get the actual value from the function within the child. — mckeever02, Mar 21 '19 at 21:39
The short answer is: you don't. Props *by definition* are passed to the child and the child cannot mutate. It is very unclear what the actual relationship of these items is in the code. It seems to be complicated by the `node` being passed around, so that needs to be elucidated. The fact that you're using a code generator may be complicating the issue, adding "non-beginner" code that makes editing and understanding the result harder. — Marc L., Mar 22 '19 at 14:35
It's also not clear why `parent` needs `dist`. When you write "filter the array of children" are you talking about a different type of child component than `child` above? Also missing from your `parent` code examples is any notion of **state**. — Marc L., Mar 22 '19 at 14:40

Isaac Vidrine · Answer 1 · 2019-03-22T14:32:42.680

1

I think all you're doing is returning a value and not doing anything with it. For the parent to store the value of dist it needs to have that property.

What you need to do is add the property dist to the parent, and then define getDistance in the parent as well. You can then pass getDistance to the child, and the child can call that function to update the parent this.state.dist property.

So for example you could have

parent.js

return (
    <SpaceWrapper key={node.id}>
        <Space node={node} getDistance={this.getDistance} />
    </SpaceWrapper>
)

Then in the child you can call this.props.getDistance() to update

Hope that helps you.

edited Mar 22 '19 at 14:32

answered Mar 21 '19 at 20:44

Isaac Vidrine

1,568
1
8
20

Thanks, tried that but still seems to be getting `undefined` for `this.dist` `` – mckeever02 Mar 21 '19 at 23:12
is `this.dist` defined in the parent class? Actually should be `this.state.dist` sorry. You need to set `dist` property on parent state – Isaac Vidrine Mar 22 '19 at 14:21
This doesn't sound right. A child component should never attempt to mutate the props passed to it. OP has the right idea, he's just missing a couple things. – Marc L. Mar 22 '19 at 14:28
@MarcL. you're right... its been a while since Ive been in react, but I just updated my answer. I think this is the right solution. – Isaac Vidrine Mar 22 '19 at 14:33

Passing props to parent

1 Answers1