title: Update React Data when MySQL Data Changes
body: <p>I've created a React application which uses <code>fetch()</code> to the route file on <code>componentDidMount</code> to build out data in the rendered component.</p>
  
  <p>This works great, but the React component is static when the data in the MySQL database is updated.</p>
  
  <p>How do I update my React component with any changes when the data in the MySQL database is changed? Please see an example of my code below.</p>
  
  <p><strong>React File - react.js</strong></p>
  
  <pre><code>class myComponent extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              data: []
          }
      }
  
      // componentDidMount - When the component is mounted.
      componentDidMount() {
  
          // Retrieve project data from the database.
          fetch('/retrieve-data', {
              credentials: 'include'
          })
          .then((response) =&gt; {
              if (response.ok) {
                  return response.json();
              } else {
                  console.log('Error with session response');
              }
          })
          .then((result) =&gt; {
  
              // Set the state of data.
              this.setState({
                  data: data
              })
          })
          .catch((error) =&gt; {
              console.log('Error: ', error);
          });
      }
  
      render() {
          return (
              &lt;div&gt;
  
                  {/* Loop Data Array */}
                  {this.state.data.map((thisData, k) =&gt; (
                      &lt;div key={k}&gt;
                          {thisData.field1}
                      &lt;/div&gt;
                  ))}
  
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p><strong>Route File - retrieve-data.js</strong></p>
  
  <pre><code>var express = require('express');
  var router = express.Router();
  var mysql = require('mysql');
  
  var connection = mysql.createConnection({
      host: myHost,
      user: myUser,
      password: myPassword,
      database: myDatabase
  })
  
  router.get('/', function(req, res, next) {
  
      // Select data from the database.
      connection.query("SELECT * FROM database_table", function (error, resultData, fields) {
  
          // Send the result message back to the React application.
          res.send({resultData});
      });
  });
  
  module.exports = router;
  </code></pre>
  
  <p>The data is updated by a Webhook on a separate route file, so this could be where I would want the server to tell React that it needs to update, but only if the change was relative to the data the individual client is seeing.</p>
  
  <p>Apologies for this question, I am very new to React. Thank you!</p>