React, не могу вывести элемент после axios get запроса?

Question

[Martian_o]

{this.state.cinemas.map(cinema => (
          <ListItemCinema
            mall={cinema.attributes.mall}
            title={cinema.attributes.title}
            subway={
              cinema.attributes.subway[0] === "undefined"
                ? null
                : cinema.attributes.subway[0].name
            }
            labels={cinema.attributes.labels}
            key={cinema.id}
            shortTitle={cinema.attributes.shortTitle}
          />
        ))}

как я могу вывести все элементы, если в некоторых объектах встречается постой массив subway

Comments

[Роман Александрович]

=== "undefined" так не сравнивают попробуйте так === undefined

Answer 1

[Антон Спирин]

Ничто не мешает вам передавать объект cinema в компонент целиком:

{this.state.cinemas.map(cinema => <ListItemCinema key={cinema.id} cinema={cinema} />)}

const ListItemCinema = ({ cinema }) => {
  const { subway, shortTitle, labels, title, mail } = cinema.attributes;
  
  /* some code */  

  return (
    <div>
      {/* some code */}
      <ul>
        {subway.map(station => <li key={station.name}>{station.name}</li>)}
      </ul>
    </div>
  );
}

Answer 2

[Martian_o]

решил вопрос с пустым массивом через проверку

{props.subway.length ? props.subway[0].name : null}

Comments

[Антон Спирин]

Таким способом вы рендерите только одну станцию метро, а их может быть несколько.

[Martian_o]

Антон Спирин, Тогда как будет правильно написать проверку?

[Антон Спирин]

Martian_o, смотря зачем эта проверка. Если не надо рендерить контейнер списка, в случае если массив пуст:

{!!subway.length && (
  <ul>
    {subway.map(station => <li key={station.name}>{station.name}</li>)}
  </ul>
)}

Если контейнера нет, то и проверка не нужна.

{subway.map(station => <div key={station.name}>{station.name}</div>)}

Если массив пуст, то ничего отрисовано не будет.

Answer 3

[Kappy]

{this.state.cinemas.map((cinema,num) => (
      <ListItemCinema
        mall={cinema.attributes.mall}
        title={cinema.attributes.title}
        subway={
          cinema.attributes.subway[num] === "undefined"
            ? null
            : cinema.attributes.subway[num].name
        }
        labels={cinema.attributes.labels}
        key={cinema.id}
        shortTitle={cinema.attributes.shortTitle}
      />
    ))}

Если вы про это