title: Update database from state variable when state changes
body: <p>What i'm trying to do is update my database using a state variable when a save button is pressed. In the save handler a new value is added to the this.state.saved list and an updataDatabase function is called. The problem is that when the button is pressed setState does not update the state variable so therefore nothing is updated in the database. My question is: how can I make the setState update the component so that the database is updated?
  This is my code</p>
  
  <pre><code>class Articles extends Component{
      constructor(props){
          super(props);
          this.state = {
              check:false,
              saved:[]
          }
  
          this.handleSave = this.handleSave.bind(this)
      }
  
      async componentDidMount(){
          savedArticles = this.props.article.saved
  
          this.setState({
              check:this.props.article.check,
              saved:this.props.article.saved
      })
  }
  
  async updateDataBase(){
      let updates = {
          body:{
              userName:this.props.article.user,
              userEmail:this.props.article.email,
              userPhone:this.props.article.phone,
              savedArticles:this.state.saved,
              userInterests:this.props.article.interestList,
  
          }
  
  
      }
      console.log(updates)
  
      return await API.put(apiName,path,updates);
  }
  
  handleSave () {
      const urlList = [];
      let article = {};
  
      for(let i=0; i&lt;this.state.saved.length; i++){
          urlList.push(this.state.saved[i].url)
      }
      if(!urlList.includes(this.props.article.url)){
  
          article =  {
              url:this.props.article.url,
              title:this.props.article.title,
              image:this.props.article.urlToImage,
              author:this.props.article.author,
              check:true,
  
          }
          savedArticles.push(article)
              this.setState({
                  check: true,
                  saved:[...this.state.saved,article]
  
              })
  
  
          this.updateDataBase();
  
      }
  }
  
  render()
  {
      console.log(this.state.check)
  
      return (
          &lt;div className="item"&gt;
              &lt;div className="card"&gt;
                  &lt;img src={this.props.article.urlToImage} alt="No available image" width="100%" height="200px"&gt;&lt;/img&gt;
                  &lt;div&gt;
  
                      &lt;h5 className="card-title"&gt;{this.props.article.title}&lt;/h5&gt;
                      &lt;p className="card-text"&gt;{this.props.article.author}&lt;/p&gt;
                      &lt;a href={this.props.article.url} target="_blank" id="articleLink" className="btn btn-primary"&gt;&lt;FontAwesomeIcon icon="external-link-alt" /&gt; See full article&lt;/a&gt;
  
                      {this.state.check?(
                          &lt;button disabled={true}  id="buttonsArticle" className="btn btn-primary"&gt;&lt;FontAwesomeIcon icon="check" /&gt; Saved&lt;/button&gt;
                      ):(
                          &lt;button onClick={this.handleSave.bind(this)} id="buttonsArticle" className="btn btn-primary"&gt;&lt;FontAwesomeIcon icon="save" /&gt; Save Article&lt;/button&gt;
                      )}
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="divider"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      )
  }}
  </code></pre>