CODEWITHSUNDEEP
reactjs
Ryan Fonseka
Ryan Fonseka

Reputation: 255

map function not working properly in object React

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>

Upvotes: 1

Views: 510

Answers (3)

jeyremd
jeyremd

Reputation: 199

This is because you forgot the return


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

Upvotes: 1

Viet
Viet

Reputation: 12787

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>
})}

Upvotes: 1

DBS
DBS

Reputation: 9984

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>)}

Upvotes: 1

Related Questions