title: Why can't I send my props to a component?
body: <p>I have a file that is using React Router to hold all of my routes. I also have a dashboard component where I am doing a GET request to get a list of all the restaurant reservations in my database. I am trying to create another component called SeatReservation where I can click on the listed reservation and assign it an id, so it will appear occupied.</p>
  <p>Routes.js</p>
  <pre><code>function Routes() {
    return (
      &lt;Switch&gt;
        &lt;Route exact={true} path='/'&gt;
          &lt;Redirect to={'/dashboard'} /&gt;
        &lt;/Route&gt;
        &lt;Route exact={true} path='/reservations'&gt;
          &lt;Redirect to={'/dashboard'} /&gt;
        &lt;/Route&gt;
        &lt;Route path='/dashboard'&gt;
          &lt;Dashboard date={today()} /&gt;
        &lt;/Route&gt;
        &lt;Route path='/reservations/new'&gt;
          &lt;ReservationForm /&gt;
        &lt;/Route&gt;
        &lt;Route path='/tables/new'&gt;
          &lt;TablesForm /&gt;
        &lt;/Route&gt;
        &lt;Route path='/reservations/:reservationId/seat'&gt;
          &lt;SeatReservation /&gt;
        &lt;/Route&gt;
        &lt;Route&gt;
          &lt;NotFound /&gt;
        &lt;/Route&gt;
      &lt;/Switch&gt;
    );
  }
  </code></pre>
  <p>This of course will bring me to the correct URL and a new page.</p>
  <p>Dashboard.js</p>
  <pre><code>function Dashboard({ date }) {
    const [reservations, setReservations] = useState([]);
    const [reservationsError, setReservationsError] = useState(null);
    const [table, setTable] = useState([]);
    let location = useLocation();
  
    // Grab the query string to check what day is is
    const params = useQuery();
    const queryDate = params.get('date');
  
    // Format today's date so we can compare it to query string
    let today = new Date();
    let day = String(today.getDate()).padStart(2, '0');
    let month = String(today.getMonth() + 1).padStart(2, '0');
    let year = today.getFullYear();
    today = `${year}-${month}-${day}`;
  
    useEffect(loadDashboard, [date]);
  
    function loadDashboard() {
      const abortController = new AbortController();
      setReservationsError(null);
      listReservations({ date }, abortController.signal)
        .then(setReservations)
        .catch(setReservationsError);
      return () =&gt; abortController.abort();
    }
  
    useEffect(() =&gt; {
      const getAllTables = async () =&gt; {
        const response = await fetch('http://localhost:5000/tables');
  
        const tablesFromAPI = await response.json();
        setTable(tablesFromAPI);
      };
      getAllTables();
    }, []);
  
    return (
      &lt;main className='container' style={{ maxWidth: '600px' }}&gt;
        &lt;h1&gt;Dashboard&lt;/h1&gt;
        &lt;div&gt;
          {/* &lt;h4 className='mb-0'&gt;Reservations for date: {date}&lt;/h4&gt; */}
  
          {queryDate === today || queryDate === null ? (
            &lt;DashboardList
              reservations={reservations}
              setReservations={setReservations}
              date={date}
            /&gt;
          ) : (
            &lt;DashboardRes
              date={date}
              reservations={reservations}
              setReservations={setReservations}
              reservationsError={reservationsError}
              setReservationsError={setReservationsError}
            /&gt;
          )}
          &lt;Seat table={table} setTable={setTable} /&gt;
          {location.pathname ===
            `/reservations/${reservations.reservation_id}/seat` &amp;&amp; (
            &lt;SeatReservation table={table} setTable={setTable} /&gt;
          )}
        &lt;/div&gt;
        &lt;ErrorAlert error={reservationsError} /&gt;
        {/* {JSON.stringify(reservations)} */}
      &lt;/main&gt;
    );
  }
  </code></pre>
  <p>I set up a conditional to check if it was on the home route or not (in this case it's looking for /reservations/:reservationId/seat) so that the component doesn't automatically show up.</p>
  <p>However, no matter what I do, whenever I pass props to <code>&lt;SeatReservation /&gt;</code>, it say's it's undefined.</p>
  <p>Am I not able to use the <code>&lt;SeatReservation /&gt;</code> twice, or am I passing it props incorrectly?</p>