JS Promise is stuck to my code

Question

Its been 48 hours and still couldn't figured it out.

I'm dealing with a promise using a Clarifai api for react native. Here is my code:

function updater(){
      return ClarifaiApp.models.predict("coiner app", "https://www.coinsonline.com/wp-content/uploads/2015/11/Half-Dimes-and-Dimes.jpg").then(

        function(response){
          par1 = response['outputs'][0]['data']['concepts'][0];

          return (par1.name);
        });
     }

export default class CameraScreen extends React.Component {
 render(){
  return(
   function updater2(){
    updater().then(function(getAlll){
     <Text> {getAlll} </Text> //error: trying to add an object - invalid
    });
   );
  }
 }

Now, the thing is that I want to get the value of 'par1'. The problem is that whenever I try to get the value of getAlll in console which is par1, I can get the string I wanted but when I try to add it as {variable} inside text, it gives an error that I'm trying to an object inside .

Answer 1

I think the problem is you're trying to render a Promise inside render. I think the message may be a little misleading. Here is a codepen that explains one way to handle renders that depend on async data.

https://codepen.io/sscaff1/pen/bMVvgN

export default class CameraScreen extends React.Component {
 state = { getAll: null }
 componentDidMount() {
   updater().then(getAll => this.setState({ getAll }));
 }
 render(){
  const { getAll } = this.state;
  return getAll ? <Text>{getAll}</Text> : null // you can also put a loader here
  }
 }