title: React - get request is getting the correct object but when read into react component the value is undefined
body: <p>I am working on a practice problem and when I console log the response body of my get request it shows that I am fetching the correct object but when I console log the object in the component I am calling the get request in the value reads as undefined.</p>
  <p>This is my component</p>
  <pre><code>const ReservationPage = () =&gt; {
    const [reservations, setReservations] = useState([]);
    const [apiError, setApiError] = useState();
    const [roomTypes, setRoomTypes] = useState();
  
    useEffect(() =&gt; {
      getAllReservations(setReservations);
      getAllRoomTypes(setRoomTypes);
      console.log(roomTypes);
      console.log(reservations);
      const reservationsWithNames = [];
      reservations.forEach((reservation) =&gt; {
        console.log(reservation);
        const newEntry = {
          id: reservation.id,
          guestEmail: reservation.guestEmail,
          roomType: roomTypes[reservation.roomTypeId - 1].name,
          checkInDate: reservation.checkInDate,
          numberOfNights: reservation.numberOfNights,
          totalCost: roomTypes[reservation.roomTypeId - 1].rate * reservation.numberOfNights
        };
        reservationsWithNames.splice(0, newEntry);
      });
      console.log(reservationsWithNames);
    }, []);
  
    return (
      &lt;div className={styles.pageContainer}&gt;
        {apiError
          &amp;&amp; &lt;p className={styles.errMsg} name=&quot;errMsg&quot; data-testid=&quot;errMsg&quot;&gt;{Constants.API_ERROR}&lt;/p&gt;}
        &lt;div&gt;
          &lt;div className={styles.titleContainer}&gt;
            &lt;h1 className={styles.title}&gt;Maintenance&lt;/h1&gt;
            &lt;NavLink to=&quot;/reservations/create&quot;&gt;
              &lt;button
                type=&quot;button&quot;
                name=&quot;createButton&quot;
                data-testid=&quot;createButton&quot;
                className={styles.createButton}
              &gt;
                Create Reservation
              &lt;/button&gt;
            &lt;/NavLink&gt;
          &lt;/div&gt;
          &lt;div className={styles.pageBody}&gt;
            &lt;table className={styles.table}&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Action&lt;/th&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Guest Email&lt;/th&gt;
                  &lt;th&gt;Room Type&lt;/th&gt;
                  &lt;th&gt;Check In Date&lt;/th&gt;
                  &lt;th&gt;Number of Nights&lt;/th&gt;
                  &lt;th&gt;Total Cost&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {reservations.sort((a, b) =&gt; a.id - b.id).map((reservation) =&gt; (
                  &lt;tr key={reservation.id} data-testid=&quot;reservation&quot;&gt;
                    &lt;td&gt;
                      &lt;NavLink className=&quot;test-btn-reserve&quot; to=&quot;/reservations&quot;&gt;
                        &lt;Button data-testd=&quot;button&quot; className={styles.btn}&gt;
                          &lt;EditIcon /&gt;
                        &lt;/Button&gt;
                      &lt;/NavLink&gt;
                      &lt;NavLink className=&quot;test-btn-reserve&quot; to=&quot;/reservations&quot;&gt;
                        &lt;Button data-testd=&quot;button&quot; className={styles.btn}&gt;
                          &lt;DeleteIcon /&gt;
                        &lt;/Button&gt;
                      &lt;/NavLink&gt;
                    &lt;/td&gt;
                    &lt;td&gt;{reservation.id}&lt;/td&gt;
                    &lt;td&gt;{reservation.guestEmail}&lt;/td&gt;
                    &lt;td&gt;{}&lt;/td&gt;
                    &lt;td&gt;{reservation.checkInDate}&lt;/td&gt;
                    &lt;td&gt;{reservation.numberOfNights}&lt;/td&gt;
                    &lt;td&gt;{}&lt;/td&gt;
                  &lt;/tr&gt;
                ))}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>and these are my requests</p>
  <pre><code>export const getAllReservations = async (setReservations) =&gt; {
    await HttpHelper('/reservations', 'GET')
      .then((response) =&gt; {
        if (response.status === 200) {
          return response.json();
        }
        throw new Error(Constants.API_ERROR);
      })
      .then((body) =&gt; {
        console.log(body);
        setReservations(body);
      })
      .catch(() =&gt; {
        console.log('here');
      });
  };
  
  export const getAllRoomTypes = async (setRoomType) =&gt; {
    await HttpHelper('/room-types', 'GET')
      .then((response) =&gt; {
        if (response.status === 200) {
          return response.json();
        }
        throw new Error(Constants.API_ERROR);
      })
      .then((body) =&gt; {
        console.log(body);
        setRoomType(body);
      })
      .catch(() =&gt; {
      });
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/yiGDe.png" rel="nofollow noreferrer">finally this is the result I get on run
  </a></p>
  <p>fixed code shout out to sandeep.kgp and Satyam Saurabh for the assist</p>
  <pre><code>/* eslint-disable react-hooks/exhaustive-deps */
  /* eslint-disable no-unused-vars */
  import React, { useEffect, useState } from 'react';
  import { NavLink } from 'react-router-dom';
  import EditIcon from '@mui/icons-material/Edit';
  import DeleteIcon from '@mui/icons-material/Delete';
  import { Button } from '@mui/material';
  import { getAllRoomTypes, getAllReservations } from './ReservationService';
  import styles from './Reservations.module.css';
  import Constants from '../../utils/constants';
  
  const ReservationPage = () =&gt; {
    const [reservations, setReservations] = useState([]);
    const [apiError, setApiError] = useState();
    const [roomTypes, setRoomTypes] = useState();
    const [reservationsWithNames, setReservationsWithNames] = useState([]);
  
    const getName = (reservation) =&gt; {
      const roomName = roomTypes[reservation.roomTypeId - 1].name;
      console.log(roomName);
      return roomName;
    };
  
    const getTotalCost = (reservation) =&gt; {
      const totalCost = roomTypes[reservation.roomTypeId - 1].rate * reservation.numberOfNights;
      console.log(totalCost);
      return totalCost;
    };
  
    useEffect(async () =&gt; {
      await getAllReservations(setReservations).then(console.log(reservations));
      await getAllRoomTypes(setRoomTypes).then(console.log(roomTypes));
    }, []);
  
    return (
      &lt;div className={styles.pageContainer}&gt;
        {apiError
          &amp;&amp; &lt;p className={styles.errMsg} name=&quot;errMsg&quot; data-testid=&quot;errMsg&quot;&gt;{Constants.API_ERROR}&lt;/p&gt;}
        &lt;div&gt;
          &lt;div className={styles.titleContainer}&gt;
            &lt;h1 className={styles.title}&gt;Maintenance&lt;/h1&gt;
            &lt;NavLink to=&quot;/reservations/create&quot;&gt;
              &lt;button
                type=&quot;button&quot;
                name=&quot;createButton&quot;
                data-testid=&quot;createButton&quot;
                className={styles.createButton}
              &gt;
                Create Reservation
              &lt;/button&gt;
            &lt;/NavLink&gt;
          &lt;/div&gt;
          &lt;div className={styles.pageBody}&gt;
            &lt;table className={styles.table}&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Action&lt;/th&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Guest Email&lt;/th&gt;
                  &lt;th&gt;Room Type&lt;/th&gt;
                  &lt;th&gt;Check In Date&lt;/th&gt;
                  &lt;th&gt;Number of Nights&lt;/th&gt;
                  &lt;th&gt;Total Cost&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {roomTypes !== undefined
                &amp;&amp; reservations.sort((a, b) =&gt; a.id - b.id).map((reservation) =&gt; (
                  &lt;tr key={reservation.id} data-testid=&quot;reservation&quot;&gt;
                    &lt;td&gt;
                      &lt;NavLink className=&quot;test-btn-reserve&quot; to=&quot;/reservations&quot;&gt;
                        &lt;Button data-testd=&quot;button&quot; className={styles.btn}&gt;
                          &lt;EditIcon /&gt;
                        &lt;/Button&gt;
                      &lt;/NavLink&gt;
                      &lt;NavLink className=&quot;test-btn-reserve&quot; to=&quot;/reservations&quot;&gt;
                        &lt;Button data-testd=&quot;button&quot; className={styles.btn}&gt;
                          &lt;DeleteIcon /&gt;
                        &lt;/Button&gt;
                      &lt;/NavLink&gt;
                    &lt;/td&gt;
                    &lt;td&gt;{reservation.id}&lt;/td&gt;
                    &lt;td&gt;{reservation.guestEmail}&lt;/td&gt;
                    &lt;td&gt;{getName(reservation)}&lt;/td&gt;
                    &lt;td&gt;{reservation.checkInDate}&lt;/td&gt;
                    &lt;td&gt;{reservation.numberOfNights}&lt;/td&gt;
                    &lt;td&gt;{getTotalCost(reservation)}&lt;/td&gt;
                  &lt;/tr&gt;
                ))}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  export default ReservationPage;
  </code></pre>