0

I have a component Result which accepts a children props that I run though my getQueryResults method in the render. getQueryResults searches the Swiftype API to return a search result object based on a user's query.

I don't understand why the console.log in the render is logging that my Promise is still pending, while the console log in the getQueryResults method definition returns the response object. I can't access any properties on the children props (such as this.props.children.headings) in the console.log within the render while it still has a pending promise status.

class Result extends React.Component {


  getQueryResults =  (query: any) => {
    return Swiftype.search(query)
      .then((response) => {
        console.log(response);  //<----returns actual object
        return response;
      })
      .catch((err) => {
        console.error(err);
      });
  };

  render() {
    return (
      <PasteCard>
        <Heading as="h2" variant="heading40">
          HEADING HERE
        {console.log( this.getQueryResults(this.props.children))}  // <-- returns Promise {<pending>}. Why?
        </Heading>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dui
          tellus, tristique in tincidunt cursus, efficitur at felis. Phasellus
          imperdiet, lorem et commodo egestas, arcu.
        </Paragraph>
      </PasteCard>
    );
  }
}

I use the Result component like so

<Result children='hot air balloons' />

0 Answers0