-1

I'm getting an error when using the map function for my component. i want to show the data in the following code(li) tags

My Array

const seatList = [
  { id: 0,
    row:"A",
   seats:[{id: 0, seatID: "c1",name:"A1" ,booked:"seat_disable"},
   {id: 1, seatID: "c2",name:"A2" ,booked:""},
   {id: 2, seatID: "c3",name:"A3" , booked:"seat_disable"},
  ]   
},
{id: 1,
  row:"B",
seats:[{id: 0, seatID: "c1",name:"A1" ,booked:""},
{id: 1, seatID: "c7",name:"B2" ,booked:"seat_disable"},
{id: 2, seatID: "c8",name:"B3" , booked:""},
]   
},
]

Code block

export default class SeatPlan extends Component {
                <ul>
                  
                  {seatList.map((rowsData, index) =>(
                    <li className="st_seat_heading_row" key={index}>{rowsData.row}</li>
                    {seats.map((seat,index) =>(
                      <li className={seat.booked} key={index}>
                      <input type="checkbox" id={seat.seatID} name={seat.name}
                       onChange={e => this.handleChanged(e)}/>
                      <label htmlFor={seat.seatID} />
                      </li>
                    ))}
                  ))}                    
                </ul>
}

error

Ryan Fonseka
  • 155
  • 11

0 Answers0