0

I'm trying to update the react component's local state when an element is clicked

onChildClick={this.onChildClickCallback}

where onChildClickCallback is a helper function outside the render which is as follows:

onChildClickCallback = key => {
            this.setState({ items: this.props.data, newKey: key }, function() {
                console.log(this.state);
            });
        };

I've written the above console.log in callback as I've read somewhere state might not get updated immediately.

But, whatever the value I pass to the state, it is not getting updated and console is logging the same old value of key and items. What am I missing here?

UPDATED CODE:

render() {
        console.log(this.state);
        const items = this.props.data;

        return (
            <Fragment>
                <GoogleMap
                    center={this.state.center}
                    onChildClick={this.onChildClickCallback}
                >
                    {items.map(item => (
                        <Marker
                            key={item.id}
                            lat={item.lattitude}
                            lng={item.longitude}
                            place={place}
                        />
                    ))}
                </GoogleMap>
            </Fragment>
        );
    }

And you have onChildClickCallback already. I wanted to update the state and rerender the component when onChildClickCallback is triggered.

beta programmers
  • 513
  • 2
  • 8
  • 23
  • I dont think there is enough of your code here to pinpoint what's wrong. But, I would imagine the issue is with how you're using onChildClickCallBack in your child compomnent. – Chris Ngo Jun 25 '19 at 19:47
  • As was mentioned above, can you please add the component(parent/child) snippets as well – Bryan Jun 25 '19 at 21:00
  • Why would you set the `items` key in your state to the same data that is in `this.props.data`... that is generally an anti-pattern in React without a very good reason. – jered Jun 25 '19 at 21:00
  • @jered can you please elaborate. I was trying to update the props and set that to local state. May I know what's wrong with that and what's the alternative approach? – beta programmers Jun 26 '19 at 02:29
  • if at all we cannot update the props in a component, I could see the updated props when logged in console, the why not add it to the state ? – beta programmers Jun 26 '19 at 02:49
  • @ChristopherNgo and Bryan please find the code updated – beta programmers Jun 26 '19 at 02:57
  • I deleted my answer since I was looking wrong lib. I guess thats the correct one [google-map-react](https://github.com/google-map-react/google-map-react). Anyway, the next step on debugging that would be to test that `onChildClick` gets called at all. Ie. maybe add some `console.log` on top before `setState`. State changes are delayed by frame or two some times, not more than that. Also, you might want to convert that one regular `function` in `onChildClick` to arrow function just to make sure it has correctly bound `this`. – Antti Pihlaja Jun 27 '19 at 05:52

0 Answers0