Вернуть jsx, используя функцию карты

Question

Я новичок в react-redux.Вот что я делаю:

return analitics.map(analiticss => (
  <div className="col-md-8 d-flex justify-content-around questionDetailRow1">
    <div>
      <span>
        <i
          className="fa fa-check-circle"
          style={{ fontSize: "24px", color: "green" }}
        />
      </span>
      <span className="ml-2">
        {analitics.wrong ? `${analitics.wrong}` : "0"}
      </span>
    </div>
    <div>
      <span>
        <i
          class="fa fa-times-circle"
          style={{ fontSize: "24px", color: "red" }}
        />
      </span>
      <span className="ml-2">{analiticss.wrong}</span>
    </div>
    <div>
      <span className="skip-background">
        <i className="fa fa-fast-forward" style={{ color: "black" }} />
      </span>
      <span className="ml-2">{analiticss.skipped}</span>
    </div>
    <button type="button" className="btn btn-outline-primary">
      Change
    </button>
  </div>
));

Итак, здесь я хочу иметь этот div в любых условиях.Итак, что происходит,

, если анализ отсутствует, то это не вернет.Поскольку нет элемента для итерации.

, поэтому я хочу показать эти значения как `0. {analiticss.skipped} это значения.

Но он не возвращает этот элемент какон не имеет какого-либо элемента массива.

Одно из решений, которое у меня есть, состоит в том, чтобы использовать, если еще, с явным добавлением того же HTML в этом с 0 значениями.

Но я не думаю, что это правильное решение.Есть ли другое решение, которое я могу использовать?

Answer 1

Вы можете попробовать эту ссылку в песочнице.

Я добавил ваш код, и в аналитике нет данных.

https://codesandbox.io/s/zwr8391y24

Тем не менее вы увидитеПропущенный

Answer 2

Если вы хотите, чтобы div-обертка был видимым, вам нужно переместить функцию map внутрь div-обертки.Что-то вроде:

<div className="col-md-8 d-flex justify-content-around questionDetailRow1"> {analytics.map(...)} </div>