foreach внутри отображения и рендеринга данных

Question

Я хочу показать только две данные из массива.данные выглядят так:

0: имя: "jan" url: "https://www.pet/event/imain5/"

1: имя:" willium "url:" https://www.pet/event/imain6/"

2: name: "petter" url: "https://www.pet/event/imain7/"

В моем коде теперь отображаются все имена от 0 до 2.

<div>
  {!!this.state.news.length && (
      {this.state.news.map(name => (
        <List.Item key={name.text}>
          <a href={name.url} target="_blank">
           {name.text}
            />
          </a>
          </List.Item>
      ))}
   )}
</div>

Но я хочу показать первые два имениэто будет форма 0 и 1. но я не понимаю, как я могу зацикливаться внутри этой карты.

Answer 1

Вы можете использовать index аргумент из map обратного вызова и вернуть ноль для нежелательных элементов:

<div>
    {!!this.state.news.length && (
        {
            this.state.news.map((name, index) => index > 1 ? null : (
                <List.Item key={name.text}>
                    <a href={name.url} target="_blank">
                        {name.text}
                        />
                </a>
                </List.Item>
            ))
        }
    )}
</div>