title: ReactJS check database for changes and update component without refreshing browser
body: <p>I am having trouble figuring out how I can update the component with the new data from the database after the edit function has been run and the update to the database was successful.</p>
  
  <p>I have tried doing <code>this.forceUpdate()</code> but that doesn't work. I heard about using <code>this.setState()</code> but I don't know how I would update it using that with the database as my classroom state is a JSON array.</p>
  
  <p>I have been thinking and google-ing long and hard for days without any luck, so any advice or help with this problem would be greatly appreciated.</p>
  
  <p>P.S. I am using MySQL for my Database. I don't know if that matters.</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        toggle: false,
        toggleIdxArray: [],
        classroom: [],
        childflagged: '',
        flagreason: '',
        id: ''
      };
      this.eventHandler = this.eventHandler.bind(this);
      this.logChange = this.logChange.bind(this);
      this.handleEdit = this.handleEdit.bind(this);
    }
  
    logChange(e) {
      this.setState({
        [e.target.name]: e.target.value
      });
    }
  
    handleEdit(event) {
      event.preventDefault()
      var data = {
        childflagged: this.state.childflagged,
        flagreason: this.state.flagreason,
        id: this.state.id
      }
      fetch("/classroom/edit", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      }).then(function(response) {
        if (response.status &gt;= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      }).then(function(data) {
        if (data.affectedRows === 1) {
          console.log('Edited Flag!'); //UPDATE COMPONENT FUNCTION OF SOME-SORT HERE
        }
      }).catch(function(err) {
        console.log(err)
      });
  
    }
  
    eventHandler(event, idx) {
      let updatedArr = this.state.toggleIdxArray.slice();
      let checkIdx = updatedArr.indexOf(idx);
      if (checkIdx === -1) updatedArr.push(idx);
      else updatedArr.splice(checkIdx, 1);
      this.setState((prevState) =&gt; ({
          toggleIdxArray: updatedArr
        })
      );
    }
  
    componentDidMount() {
      fetch("/classroom")
      .then(res =&gt; res.json())
      .then(classroom =&gt; this.setState({ classroom }))
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
                  &lt;div className="wrapper"&gt;
                      &lt;h1&gt;Classroom&lt;/h1&gt;
                      {this.state.classroom.map((classroom, idx) =&gt;
                          &lt;div className="child" key={classroom.id}&gt;
                &lt;p className="detail"&gt;Child's Name: &lt;span className={classroom.childflagged}&gt;{classroom.childsname}&lt;/span&gt; &lt;i title={classroom.flagreason} className={'fa fa-flag flag' + classroom.childflagged}&gt;&lt;/i&gt;&lt;i title={classroom.starreason} className={'fa fa-star star' + classroom.starstudent}&gt;&lt;/i&gt;&lt;/p&gt;
                &lt;p className="detail"&gt;Parent's Phone Number: {classroom.parentsnumber}&lt;/p&gt;
                &lt;div className="actionMenu"&gt;
                  &lt;button className="flags" id={classroom.id} onClick={e =&gt; this.eventHandler(e, idx)}&gt;Edit Flags&lt;/button&gt;
                  &lt;button className="results"&gt;View Results&lt;/button&gt;
                  &lt;button className="profile"&gt;View Profile&lt;/button&gt;
                &lt;/div&gt;
                &lt;div className="actionForm"&gt;
                  &lt;div&gt;
                    &lt;form id={"flagform" + classroom.id} className={this.state.toggleIdxArray.includes(idx) ? '' : 'hide'} onSubmit={this.handleEdit} method="post" autoComplete="no"&gt;
                      &lt;input type="hidden" name="id" value={classroom.id} /&gt;
                      &lt;input type="text" onChange={this.logChange} value={this.state.childflagged} name="childflagged" placeholder="Flag Type" /&gt;
                      &lt;input type="text" onChange={this.logChange} value={this.state.flagreason} name="flagreason" placeholder="Reason For Flag" /&gt;
                      &lt;input type="submit" onClick={() =&gt; this.state.id = classroom.id} name="submit" value="Save Changes" /&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            )}
                  &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>