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

Question

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;
    }
  });
}

Answer 1

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

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

{
  recentEventsData.slice(0, 6).map((data, index) => (
        <div key={index}>
          <p>{data.text}</p>
          <p>{data.timestamp}</p>
          <hr />
        </div>
      )
  );
}

Answer 2

Вам нужно использовать {} внутри 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>
))}

Answer 3

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