title: How can I update or re-render a component from another component? (React)
body: <p>I originally had two components displayed on two different pages via Routes: the RecordList and Create components. It all currently works properly when I use Routes. However, I'm trying to modify this project so that both components are on the same page at the same time instead of being on two different pages.</p>
  <p>My goal is to have RecordList update (fetch the data from the server) once I click the &quot;Add Record&quot;  button. Currently the Create component is working properly, however I have to refresh the page to see the changes on the RecordList component.</p>
  <p>I'm having trouble understanding what I need to do to get RecordList to update when the record is posted to the server. Any guidance is helpful.</p>
  <p>Would this be a scenario to use Lifting Up State? I didn't think so because I believe these two components are sibling components.</p>
  <p>Do I need to re-render the RecordList component? Should I just combine these two components into one component? My guess was that it would be better for these to be two separate components.</p>
  <p>For reference, I did not write all of this code. I'm trying to modify the project I built using the MERN tutorial on the MongoDB website.</p>
  <p>Here is a screenshot of the page:
  <a href="https://i.stack.imgur.com/X5exO.png" rel="nofollow noreferrer">homepage</a></p>
  <p>App.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import './App.css';
  
  // We use Route in order to define the different routes of our application
  import { Route, Routes } from &quot;react-router-dom&quot;;
  
  // We import all the components we need in our app
  import Navbar from &quot;./components/navbar&quot;;
  import RecordList from &quot;./components/recordList&quot;;
  import Edit from &quot;./components/edit&quot;;
  import Create from &quot;./components/create&quot;;
  
  const App = () =&gt; {
      return (
          &lt;div&gt;
              &lt;div className=&quot;container&quot;&gt;
                  &lt;Navbar /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;container py-3 my-3 d-flex align-items-start justify-content-around flex-wrap flex-md-nowrap&quot;&gt;
  
                  &lt;div className=&quot;w-100 px-md-3 py-3 py-md-0&quot;&gt;&lt;RecordList /&gt;&lt;/div&gt;
                  &lt;div className=&quot;w-100 px-md-3 py-3 py-md-0&quot;&gt;&lt;Create /&gt;&lt;/div&gt;
                  {/* &lt;Routes&gt;
                      &lt;Route exact path=&quot;/&quot; element={&lt;RecordList /&gt;} /&gt;
                      &lt;Route path=&quot;/edit/:id&quot; element={&lt;Edit /&gt;} /&gt;
                      &lt;Route path=&quot;/create&quot; element={&lt;Create /&gt;} /&gt;
                  &lt;/Routes&gt; */}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default App;
  </code></pre>
  <p>recordList.js:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  const Record = (props) =&gt; (
      &lt;tr&gt;
          &lt;td&gt;{props.record.date}&lt;/td&gt;
          &lt;td&gt;{props.record.destination}&lt;/td&gt;
          &lt;td&gt;{props.record.location}&lt;/td&gt;
          &lt;td&gt;
              &lt;Link className=&quot;btn btn-link&quot; to={`/edit/${props.record._id}`}&gt;Edit&lt;/Link&gt; |
              &lt;button className=&quot;btn btn-link&quot;
                  onClick={() =&gt; {
                      props.deleteRecord(props.record._id);
                  }}
              &gt;
                  Delete
              &lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  );
  
  export default function RecordList() {
      const [records, setRecords] = useState([]);
  
      // This method fetches the records from the database.
      useEffect(() =&gt; {
          async function getRecords() {
              const response = await fetch(`http://localhost:5000/record/`);
  
              if (!response.ok) {
                  const message = `An error occurred: ${response.statusText}`;
                  window.alert(message);
                  return;
              }
  
              const records = await response.json();
              setRecords(records);
          }
  
          getRecords();
  
          return;
      }, [records.length]);
  
      // This method will delete a record
      async function deleteRecord(id) {
          await fetch(`http://localhost:5000/${id}`, {
              method: &quot;DELETE&quot;
          });
  
          const newRecords = records.filter((el) =&gt; el._id !== id);
          setRecords(newRecords);
      }
  
      // This method will map out the records on the table
      function recordList() {
          return records.map((record) =&gt; {
              return (
                  &lt;Record
                      record={record}
                      deleteRecord={() =&gt; deleteRecord(record._id)}
                      key={record._id}
                  /&gt;
              );
          });
      }
  
      // This following section will display the table with the records of individuals.
      return (
          &lt;div&gt;
              &lt;h3&gt;Record List&lt;/h3&gt;
              &lt;table className=&quot;table table-striped&quot; style={{ marginTop: 20 }}&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Date&lt;/th&gt;
                          &lt;th&gt;Destination&lt;/th&gt;
                          &lt;th&gt;Location&lt;/th&gt;
                          &lt;th&gt;Action&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;{recordList()}&lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>create.js:</p>
  <pre><code>import { useNavigate } from &quot;react-router&quot;;
  
  export default function Create() {
      const [form, setForm] = useState({
          date: &quot;&quot;,
          destination: &quot;&quot;,
          location: &quot;&quot;,
      });
      const navigate = useNavigate();
  
      // These methods will update the state properties.
      function updateForm(value) {
          return setForm((prev) =&gt; {
              return { ...prev, ...value };
          });
      }
  
      // This function will handle the submission.
      async function onSubmit(e) {
          e.preventDefault();
  
          // When a post request is sent to the create url, we'll add a new record to the database.
          const newPerson = { ...form };
  
          await fetch(&quot;http://localhost:5000/record/add&quot;, {
              method: &quot;POST&quot;,
              headers: {
                  &quot;Content-Type&quot;: &quot;application/json&quot;,
              },
              body: JSON.stringify(newPerson),
          })
              .catch(error =&gt; {
                  window.alert(error);
                  return;
              });
  
          setForm({ date: &quot;&quot;, destination: &quot;&quot;, location: &quot;&quot; });
          navigate(&quot;/&quot;);
      }
  
      // This following section will display the form that takes the input from the user.
      return (
          &lt;div&gt;
              &lt;h3&gt;Add Mileage Record&lt;/h3&gt;
              &lt;form onSubmit={onSubmit}&gt;
                  &lt;div className=&quot;row my-3&quot;&gt;
                      &lt;div className=&quot;col&quot;&gt;
                          &lt;div className=&quot;form-group&quot;&gt;
                              &lt;label htmlFor=&quot;date&quot;&gt;Date&lt;/label&gt;
                              &lt;input
                                  type=&quot;text&quot;
                                  className=&quot;form-control&quot;
                                  id=&quot;date&quot;
                                  value={form.date}
                                  onChange={(e) =&gt; updateForm({ date: e.target.value })}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col&quot;&gt;
                          &lt;div className=&quot;form-group&quot;&gt;
                              &lt;label htmlFor=&quot;destination&quot;&gt;Destination&lt;/label&gt;
                              &lt;input
                                  type=&quot;text&quot;
                                  className=&quot;form-control&quot;
                                  id=&quot;destination&quot;
                                  value={form.destination}
                                  onChange={(e) =&gt; updateForm({ destination: e.target.value })}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;row my-3&quot;&gt;
                      &lt;div className=&quot;col&quot;&gt;
                          &lt;div className=&quot;form-group&quot;&gt;
                              &lt;label htmlFor=&quot;location&quot;&gt;Location&lt;/label&gt;
                              &lt;input
                                  type=&quot;text&quot;
                                  className=&quot;form-control&quot;
                                  id=&quot;location&quot;
                                  value={form.location}
                                  onChange={(e) =&gt; updateForm({ location: e.target.value })}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;row my-3&quot;&gt;
                          &lt;div className=&quot;col&quot;&gt;
                              &lt;div className=&quot;form-group&quot;&gt;
                                  &lt;input
                                      type=&quot;submit&quot;
                                      value=&quot;Add Record&quot;
                                      className=&quot;btn btn-primary&quot;
                                  /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>