Ничего не отображается в браузере при отображении массива в ReactJS, даже если массив содержит элементы

Question

У меня есть следующие данные, инициализированные в магазине приставок

flightSeats: {
    AH001: {
      AH1: [
        {
          seatNumber: "1A",
          isBooked: true
        },
        {
          seatNumber: "1B",
          isBooked: true
        },
        {
          seatNumber: "1C",
          isBooked: false
        },
        {
          seatNumber: "1D",
          isBooked: false
        },
        {
          seatNumber: "1E",
          isBooked: false
        },
        {
          seatNumber: "1F",
          isBooked: false
        }
      ], //.... continues for key AH2 and so on.

В JSX я пытаюсь отобразить следующее

<li>
  <ol className="seats" type="A">

    //the data is printed to console successfully
    {console.log(flightSeats.AH001.AH1)} 

    {this.props.flightSeats.AH001.AH1.map(flightSeat => {
      <li className="seat">
        <input type="checkbox" id={flightSeat.seatNumber} />
        <label htmlFor={flightSeat.seatNumber}>
          {flightSeat.seatNumber}
        </label>
      </li>;
    })}
  </ol>
</li>

Я даже получаю элемент управления внутри карты, пока используя отладчик. Но ничего не напечатано внутри карты. Пожалуйста, помогите.

Answer 1

в методе map вместо .map(() =>{}) вы должны были использовать .map(() => <Example /> ), где Example - ваш jsx. Посмотрите на этот пример, я должен показать вам:

 render() {
      const { products } = this.state;
      const { amount } = this.props;
      return (
        <ProductList>
          {products.map((product) => (
            <li key={product.id}>
              <img
                src={product.image}
                alt={product.title}
              />
              <strong>{product.title}</strong>
              <span>{product.priceFormatted}</span>
              <button
                type="button"
                onClick={() => this.handleAddProduct(product.id)}
              >
                <div>
                  <MdAddShoppingCart size={16} color="#fff" />
                  {' '}
                  {amount[product.id] || 0}
                </div>
                <span>adicionar ao carrinho</span>
              </button>
            </li>
          ))}
        </ProductList>
      );
    }

все jsx находится внутри (), а не {}

Кроме того, деконструируйте ваши реквизиты в методе рендеринга, чтобы сделать очиститель кода.