ReactJS - passing part of onClick function as a prop from parent component

Question

Hey guys I am trying to pass a command in a prop to child component from a parent. The thing is that after my button is clicked a state in parent component has to be changed for intended sidebar to open. I seem to not get it right with the .then() part at the end on the onClick function, as I get error: × Unhandled Rejection (TypeError): Cannot read property 'then' of undefined

CHILD COMPONENT:

return (
          <div
            className="results-item"
            onClick={async () => {
              let place_detail;
              try {
                const URL = `https://maps.googleapis.com/maps/api/place/details/json?place_id=${places.place_id}&fields=name,rating,formatted_phone_number&key=
      MYAPIKEY`;
                const response = await axios.get(URL);
                console.log(response.data);
                place_detail = response.data.results;
              } catch (error) {
                console.log(error.message);
              }

              this.setState({ place_detail }).then(this.props.sideBarOpen);
            }}
          >
            <ResultsItem
              name={places.name}
              image={Thumbnail}
              rating={places.rating}
              rating_total={places.user_ratings_total}
            />
          </div>
        );

PARENT COMPONENT:

<Search sideBarOpen={() => setOpen(!open)} />

Does this answer your question? Can I execute a function after setState is finished updating? — rickdenhaan
– rickdenhaan, Commented Apr 25, 2020 at 15:05

kind user · Accepted Answer · 2020-04-25 15:03:04Z

0

setState doesn't return a promise. Use a callback instead:

this.setState({ place_detail }, () => {
   this.props.sideBarOpen();
});

answered Apr 25, 2020 at 15:03

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Comments

Atin Singh · Accepted Answer · 2020-04-25 15:03:32Z

0

You can't use .then on setState call. You can use callback function of setState to what you are trying to do -

this.setState({ place_detail }, () => this.props.sideBarOpen());

answered Apr 25, 2020 at 15:03

Atin Singh

3,6902 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

ReactJS - passing part of onClick function as a prop from parent component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related