title: Updating react component state after API call. 2022
body: <p>I am trying to create a react component that receives one object initially. this object has all the necessary data for me to make an API call and query a DB collection. I have semi acheived what I am needing but it is messy includes some code from outdated tutorials. This  should be easy I would think with react.</p>
  <p><strong><code>QuestionComponent.js</code></strong></p>
  <pre class="lang-js prettyprint-override"><code>class QuestionComponent extends React.Component{
  
      constructState(props){
          var ret = []
          return new Promise(resolve =&gt; {
              console.log(props.question.public_token)
              window.API.user_profile(props.question.public_token).then(user =&gt; {
                  ret['question'] = props.question
                  ret['public_token'] = props.question.public_token
                  ret['title'] = props.question.title
                  ret['author'] = user.username
                  console.log(props.question)
                  var z = 0
                  props.question.tags.forEach(tag =&gt; {
                      z++
                      ret['tags'] = [ret['tags'], &lt;TagComponent key={tag+z} text={tag}&gt;&lt;/TagComponent&gt;] 
                  });
                  resolve(ret)                 
              })
              
              
          })
      }
  
      constructor(props){
          super(props);
          console.log(props)
          this.state = {question:props.question}
  
          this.constructState(props).then(res =&gt; {
              console.log(res)
              this.state = res
          })
          //var isQuestion
  
          //if(props.isQuestion|| props.isQuestion != undefined){
          //    this.state = {id: props.question.id, title: props.question.title, tags:props.question.tags, author:props.question.author}
          //}else{
          //    console.log('else')
          //    this.state = {id: props.question.id, title: 'test', tags:['test','test'], author:'test author'}
          //}
          
  
      }
      
      componentDidMount(){
          console.log('mount')
          this.constructState(this.state.question).then(res =&gt; {
              console.log(res)
              this.state = res
          })
      }
  
  
  
      render(){
          return (...)
      }
  
  };
  
  export default QuestionComponent;
  </code></pre>
  <p>this is where I am at right now. you can see the <code>console.log(res)</code> in the <code>constructor.construcState()</code> when i run the code it seems to return Exactly what i want but I think its being evaluated afterwards in the console or I cant set the state properly. I'm still somewhat new to React. could someone show me what i'm doing wrong?</p>