title: How to re-render one component from another in React
body: <p>In my React code, I have an Employees page rendering both a Table component and a Filter component. The Filter code manipulates some data stored in the Employees page and then updates the Filter's state through useEffect. The data in question is passed as a prop to both the Filter component and the Table component. However, only the Filter component is re-rendering when this change happens. Excerpts of code below.
  Sample of filter function:</p>
  
  <pre><code>function filterFunction() {
      let spliceArray = [];
          if ($('#firstNameFilter').val() !== '') {
              for (let i = 0; i &lt; props.employees.length; i++) {
                  if(props.employees[i].firstName !== $('#firstNameFilter').val()) {
                      spliceArray.push(i);
                  }
              }
              for (let i = spliceArray.length - 1; i &gt;= 0; i--) {
                  props.employees.splice(spliceArray[i], 1);
              }
          }
      setUseFilter(true);
  }
  </code></pre>
  
  <p>Sample of employees array on main page:</p>
  
  <pre><code>let employees = [
  {
      _id: 2,
      firstName: 'Some',
      lastName: 'One',
      department: 'Somewhere',
      jobTitle: 'Something',
      email: 'ghi@jkl.com',
      phoneExtension: 67890
  },
  ]
  </code></pre>
  
  <p>Sample of Table rendering code:</p>
  
  <pre><code>&lt;tbody&gt;
                  {props.employees.map((employee) =&gt; {
                     &lt;tr&gt;
                          &lt;td&gt;&lt;i id={employee._id + "upd"} className="fas fa-edit" onClick={handleEdit}&gt;&lt;/i&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;i id={employee._id + "del"} className="fas fa-trash-alt" onClick={deleteEmployee}&gt;&lt;/i&gt;&lt;/td&gt;
                          &lt;td&gt;{employee.firstName}&lt;/td&gt;
                          &lt;td&gt;{employee.lastName}&lt;/td&gt;
                          &lt;td&gt;{employee.department}&lt;/td&gt;
                          &lt;td&gt;{employee.jobTitle}&lt;/td&gt;
                          &lt;td&gt;{employee.email}&lt;/td&gt;
                          &lt;td&gt;{employee.phoneExtension}&lt;/td&gt;
                      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>So ideally, the filter would update the employees array and then the table would re-render with the updated array to reflect only the appropriate parts of the array per the filter. However, currently the array is being updated but the table is not re-rendering.</p>
  
  <p>I am relatively new to React but my understanding was that a component would re-render whenever its state or props changed. Although I am unaware of a way to change the state of the Table component from within the Filter component, it seems like the change in the employees array prop should trigger it.</p>
  
  <p>Any help is appreciated.</p>
  
  <p>Per request, full Employee file below:</p>
  
  <pre><code>import React from 'react';
  import Title from '../components/Title/Title.js';
  import Table from '../components/Table/Table.js';
  import Filter from '../components/Filter/Filter.js';
  import { Container, Row, Col } from '../components/Grid/Grid.js';
  import axios from 'axios';
  
  let employees = [
  {
      _id: 2,
      firstName: 'Some',
      lastName: 'One',
      department: 'Somewhere',
      jobTitle: 'Something',
      email: 'ghi@jkl.com',
      phoneExtension: 67890
  },
  {
      _id: 3,
      firstName: 'Test',
      lastName: 'McTester',
      department: 'Sales',
      jobTitle: 'Seller',
      email: 'mno@pqr.com',
      phoneExtension: 13579
  }];
  
  let employeesControl = [
  {
      _id: 2,
      firstName: 'Some',
      lastName: 'One',
      department: 'Somewhere',
      jobTitle: 'Something',
      email: 'ghi@jkl.com',
      phoneExtension: 67890
  },
  {
      _id: 3,
      firstName: 'Test',
      lastName: 'McTester',
      department: 'Sales',
      jobTitle: 'Seller',
      email: 'mno@pqr.com',
      phoneExtension: 13579
  }];
  
  function Employees() {    
      return(
          &lt;Container fluid&gt;
              &lt;Row&gt;
                  &lt;Col size="md-12"&gt;
                      &lt;Title&gt;Employee Directory&lt;/Title&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
  
              &lt;Row&gt;
                  &lt;Col size="md-12"&gt;
                      &lt;Filter employees={employees} employeesControl={employeesControl}/&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
  
              &lt;Row&gt;
                  &lt;Col size="md-12"&gt;
                      &lt;Table employees={employees} /&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
          &lt;/Container&gt;
      );
  }
  
  export default Employees;
  </code></pre>