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