-1

I am doing the project from web development course, and I want to modify it a bit, but I'm stuck. I want to save this output -> response.outputs[0].data.regions[0].data.concepts[0].name as a variable, and then pass it to a child component, however, all the ways I tried to do it didn't work. Any suggestions? Thanks!

 ``` onSubmit = () => {
    this.setState({imageUrl: this.state.input});
    app.models
    .predict(
      Clarifai.RANDOM_MODEL,
      this.state.input)
      .then(
          function (response){
           console.log(response.outputs[0].data.regions[0].data.concepts[0].name);
        },
        function(err){
          console.log(err)
        }
      );
    } ```
Coyote
  • 33
  • 4

1 Answers1

1

You can't return the response from an asynchronous call.

Inside the then callback, store the data in the component's state.

When you render the child component, pass the data from the state through a property.

Since the state might not have the desired value yet, you need to test for that and provide suitable alternative content.

e.g.

if (myStateVariable) {
    return <Foo value={myStateVariable} />
}
return <LoadingIndicator />
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thank you! I tried state, and later I also realized that the problem was that probably the output didn't come out yet, but I didn't think of a conditional! I will try it :) – Coyote Dec 10 '20 at 13:27