map function not working properly in object React

Question

I have an array that contains as follows. I have successfully mapped the data and put it into the elements. but there are some values I couldn't get correctly. I have added a console.log to figure out the data. data is correct in the array, I want to get the Seats ("A1,B1") in here <h5><small>{seatNos.seats}</small></h5> but nothing is displaying. appreciate any help.

Data array

"data": {
    "userBookings": [
      {
        "transactionId": 6357604,
        "totalAmount": 350,
        "createdAt": "2021-08-05 02:16:48",
        "movieName": "Mortal Kombat",
        "theaterName": "XxX Cinema",
        "showTime": "17:30",
        "refcode": "0016048GIN210805I",
        "bookedSeats": [
          {
            "seatType": "Comfert",
            "seats": "A1,B1",
            "childTickets": 1,
            "totalTickets": 2,
            "bookedDate": "2021-08-05"
          }
        ]
      }
    ]
  },

code

<div className="col-xl-5 col-lg-5 col-md-7 col-sm-7 col-xs-9 col-6" style={{paddingLeft:25}}>
<h5><b>{bookingsData.movieName}</b></h5>
<h5>{bookingsData.theaterName}</h5>
<h5><small>{bookingsData.showTime}</small></h5>

{bookingsData.bookedSeats.map((seatNos) => {
  console.log(seatNos.seats);
   <h5><small>{seatNos.seats}</small></h5>
})}                               
{/* <h5><small>{bookingsData.bookedSeats.seats}</small></h5> */}
</div>

Your map arrow function doesn't return anything (There's no return before the JSX element) — DBS
– DBS, Commented Aug 17, 2021 at 12:44

Viet · Accepted Answer · 2021-08-17 12:48:22Z

1

You need to return element in map, and set key for this element:

{bookingsData.bookedSeats.map((seatNos, index) => {
  console.log(seatNos.seats);
   return <h5 key={index}><small>{seatNos.seats}</small></h5>
})}

answered Aug 17, 2021 at 12:48

Viet

12.9k2 gold badges18 silver badges23 bronze badges

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

Comments

DBS · Accepted Answer · 2021-08-17 12:47:55Z

1

Your arrow function inside the .map() doesn't return a value. You need a return before the JSX:

{bookingsData.bookedSeats.map((seatNos) => {
  console.log(seatNos.seats);
  return <h5><small>{seatNos.seats}</small></h5>
})}

Or to use the implicit return arrow function syntax (Either round brackets, or no brackets: () => () or () => returnedValue)

{bookingsData.bookedSeats.map((seatNos) => <h5>
  <small>{seatNos.seats}</small>
</h5>)}

answered Aug 17, 2021 at 12:47

DBS

10.1k4 gold badges40 silver badges61 bronze badges

Comments

jeyremd · Accepted Answer · 2021-08-17 12:50:15Z

1

This is because you forgot the return


 array.map((item) => {
      return (
        <p>{item.value}</p>
      )
    })

answered Aug 17, 2021 at 12:50

jeyremd

3094 silver badges21 bronze badges

Collectives™ on Stack Overflow

map function not working properly in object React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related