Проблема с рендерингом React JSX с использованием условных условий внутри карты - PullRequest
Новая
       33

Проблема с рендерингом React JSX с использованием условных условий внутри карты

0 голосов
/ 22 апреля 2019

case 1) Я пытаюсь условно выполнить рендеринг с использованием карты и троичного оператора.Здесь я перебираю массив объектов, а затем отрисовываю только первые шесть из них.Попытка добиться того же, но это не похоже на работу.

Помощь будет оценена

OBJECT 

const recentEventsData = [
  { key: "01", text: "AAA", timestamp: "11:52:27:02 02-11-2019" },
  { key: "02", text: "BBB", timestamp: "11:52:29:02 02-11-2019" },
  { key: "03", text: "CCC", timestamp: "11:52:30:02 02-11-2019" }
];

Inside render () 

{
  recentEventsData.map((data, index) => {
    {
      index < 6 ? (
        <div key={index}>
          //Want the transformed output here , that is fourth value from object
          <p>{data.text}</p>
          <p>{data.timestamp}</p>
          <hr />
        </div>
      ) : null;
    }
  });
}

Ответы [ 3 ]

1 голос
/ 22 апреля 2019

Используйте сращивание и удалите внутренние скобки {}, поскольку .map() необходимо вернуть значения для работы.

Метод splice () добавляет / удаляет элементы в / из массива и возвращает удаленные элементы. 

{
  recentEventsData.slice(0, 6).map((data, index) => (
        <div key={index}>
          <p>{data.text}</p>
          <p>{data.timestamp}</p>
          <hr />
        </div>
      )
  );
}
1 голос
/ 22 апреля 2019

Вам нужно использовать {} внутри JSX только тогда, когда вы хотите вставить выражение JavaScript, поэтому внутри функции, заданной map, нет необходимости создавать новый блок.

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

{recentEventsData.map((data, index) => {
  return index < 6 ? (
    <div key={index}>
      <p>{data.text}</p>
      <p>{data.timestamp}</p>
      <hr />
    </div>
  ) : null;
})}

Вместо проверки индекса и возврата null для остальных элементов вы можете вместо slice выделить интересующие вас элементы перед использованием map. 

{recentEventsData.slice(0, 6).map((data, index) => (
  <div key={index}>
    <p>{data.text}</p>
    <p>{data.timestamp}</p>
    <hr />
  </div>
))}
0 голосов
/ 22 апреля 2019

Вы должны вернуть значение, используя ключевое слово return.

...