React array map ,how to get only 2 objects from array.map

Question

class App extends React.Component {
  constructor() {
    super();
    this.state = {items: []}
  }
  componentWillMount() {
    fetch('https://swapi.co/api/people/?format=json')
      .then(response => response.json())
      .then(({results: items}) => this.setState({items}))
  }
  render() {
    let items = this.state.items
    return (
      <div>

      <ul>
      {items.map((item) =>
        <li key={item.id}>
          {item.name}
        </li>

      )}
    </ul>


      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Here the Array.map render all the properties from object.

I want only 2 objects using array.map method and render only 2 objects, not all

how can I do this ?

Regards,

Roy Wang · Accepted Answer · 2018-04-27 08:18:31Z

3

You can do a slice in render: items.slice(0, 2).map(...) or in the API call if you don't need to keep it in state: this.setState({ items: items.slice(0, 2) }).

Use slice(-2) if you want the last 2 items instead.

answered Apr 27, 2018 at 8:18

Roy Wang

11.3k2 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Obed Parlapiano · Accepted Answer · 2018-04-27 08:19:43Z

Short answer: you can't. The map (and forEach as in the link) don't have a way to break out of them since this is not how they're intended to be used.

However you can avoid returning anything after certain criteria:

<ul>
  {items.map((item, index) =>
    {
     return nothing, hence render nothing if more than 2 items.
     if(index >= 2) return null;

    return(
    <li key={item.id}>
      {item.name}
    </li>);
    }
  )}
</ul>

However, this is also an unclean solution.

A better way is to get a new variable with only the values you want to map though. Since you're already doing let items = this.state.items, you might as well let items = this.state.items.slice(0,2) to get only the first 2 elements and map through them using your normal map in your render.

swapnil2993 · Accepted Answer · 2018-04-27 08:21:12Z

0

You can use Array.filter option for filtering the elements from an array or use Array.slice function.

answered Apr 27, 2018 at 8:21

swapnil2993

1,39411 silver badges16 bronze badges

Collectives™ on Stack Overflow

React array map ,how to get only 2 objects from array.map

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related