foreach inside mapping and render data

Question

I want to show only two data from array. datas are like this :

0: name:"jan" url:"https://www.pet/event/imain5/"

1: name:"willium" url:"https://www.pet/event/imain6/"

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

In my code now it shows all of the names from 0 to 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>

But I want to show first two name which will be form 0 and 1. but I dont understand how can I loop inside this map.

Possible duplicate of [How to get first N number of elements from an array](https://stackoverflow.com/questions/34883068/how-to-get-first-n-number-of-elements-from-an-array) — Just code, Dec 27 '18 at 08:29

score 1 · Accepted Answer · answered Dec 27 '18 at 08:32

You can use the index argument from map callback and return null for unwanted elements:

<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>

foreach inside mapping and render data

1 Answers1