show the seats from an object array Reactjs-CodePudding

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

        <ul>              
          {seatList.map((rowsData, index) => {
            <li className="st_seat_heading_row" key={index}>{rowsData.row}</li>
            const seatLIst = rowsData.hasOwnProperty("seats") ?
            rowsData.seats.map((seat,idx) => (
              <li className={seat.booked} key={idx}>
              <input type="checkbox" id={seat.seatID} name={seat.name}
               onChange={e => this.handleChanged(e)}/>
              <label htmlFor={seat.seatID} />
              </li>
            )) : null             
          })}                    
        </ul>

I want to show as follows

CodePudding user response：

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

https://codesandbox.io/s/silly-benji-gtyvzv