React mapping rendering issue

Question

I'm having a very perplexing issue that I wonder if anyone could help with. I have objects being mapped as arrays into some html(/jsx). The objects aren't rendering. Strangely, though, in the debugger it does show each value being attributed to the insertions in the html -- but it's not rendering. any ideas?

The picture below is an example of one object in the reservations array showing as mapping in the debugger, whereas the rendering actually stays as the second picture.

The axios http request, in a promise with another request:

const getReservations = 
   axios
      .get(`${api_url}/reservations`, {
          headers: {
              'Authorization': `Bearer ${sessionStorage.token}`
          }
       })
       .then((res) => {
           setReservations(reservations => ([...reservations, ...res.data]));
       })
        
const getRoomTypes = 
   axios
       .get(`${api_url}/room-types`, {
           headers: {
               'Access-Control-Allow-Origin': `${ui_url}`,
               'Authorization': `Bearer ${sessionStorage.token}`
           }
       })
       .then((res) => {
           setRoomTypes(roomTypes => ([...roomTypes, ...res.data]));
       })
        
Promise.all([getReservations, getRoomTypes])
    .catch(() => { 
         setError(connectionError);
    });

}, []);

Which passes the data to the rendered component:

return (
   <div>
     <h2>Reservations</h2>
     <Link className="button" to="/reservations/create">Create</Link>
     <br />
     <br />
     <ReservationDiv error={error} resData={reservations} />
   </div>
);

The component in which the objects are rendered:

const ReservationDiv = (props) => {
    
    const reservations = props.resData;

    const renderTableData = () => {
        reservations.map((reservation) => {
            const { id, user, guestEmail, roomTypeId, checkInDate, 
                    numberOfNights } = reservation;
            
    return (
       <tr key={id}>
          <td className="res">{id}</td>
          <td className="user">{user}</td>
          <td className="email">{guestEmail}</td>
          <td className="room">{roomTypeId}</td>
          <td className="date">{checkInDate}</td>
          <td className="nights">{numberOfNights}</td>
       </tr>
      );
  });
}

   return (
       <table>
           <tbody>
               <tr>
                   <th>ID</th>
                   <th>Input by</th>
                   <th>Guest Email</th>
                   <th>Room Type</th>
                   <th>Check-in Date</th>
                   <th># of Nights</th>
                   <th>Total</th>
                </tr>
                {renderTableData()}
            </tbody>
        </table>
    );
}

I can also provide quoted code, but I figured the problem seems to be something more fundamental, since it's a difference between a representation of a thing and the thing itself

I would make sure you post the full react component since it's not clear whether you're rendering this object. You may just be iterating over it. — Yuji 'Tomita' Tomita
– Yuji 'Tomita' Tomita, Commented Jan 8, 2021 at 2:09

mccallofthewild · Accepted Answer · 2021-01-08 02:39:13Z

1

You need to return the mapped array of JSX objects

const renderTableData = () => {
    return reservations.map((reservation) => {
//...

answered Jan 8, 2021 at 2:39

mccallofthewild

5202 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React mapping rendering issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related