Is it possible to map only a portion of an array? (Array.map())

Question

I am building a project using React.js as a front-end framework. On one particular page I am displaying a full data set to the user. I have an Array which contains this full data set. It is an array of JSON objects. In terms of presenting this data to the user, I currently have it displaying the whole data set by returning each item of data using Array.map().

This is a step in the right direction, but now I need to display only a portion of the data-set, not the whole thing, I also want some control in terms of knowing how much of the total data set has been displayed, and how much of the data set is yet to be displayed. Basically I am building something like a "view more" button that loads more items of data to the user.

Here is what I am using now where 'feed' represents my Array of JSON objects. (this displays the whole data set.)

 return (   <div className={feedClass}>   {     feed.map((item, index) => {       return <FeedItem key={index} data={item}/>     })   }   </div> ); 

I am wondering if it is possible to use .map() on only a portion of the array without having to break up the array before hand? I know that a possible solution would be to hold the full data set, and break it off into portions, and then .map() those portions, but is there a way to .map() a portion of the array without having to break it up?

Any and all feedback is appreciated. Thanks!

Answer 1

Do not try to solve this problem with a hack in your mapping step.

Instead, slice() the list to the right length first before the mapping:

class Feed extends React.Component {    constructor(props) {      super(props)            this.handleShowMore = this.handleShowMore.bind(this)            this.state = {        items: ['Item A', 'Item B', 'Item C', 'Item D'],        showItems: 2      }    }        handleShowMore() {      this.setState({        showItems:           this.state.showItems >= this.state.items.length ?            this.state.showItems : this.state.showItems + 1      })    }        render() {      const items = this.state.items.slice(0, this.state.showItems).map(        (item) => <div>{item}</div>      )            return (        <div>          {items}          <button onClick={this.handleShowMore}>            Show more!          </button>        </div>      )    }  }      ReactDOM.render(    <Feed />,    document.getElementById('root')  )

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>    <div id='root'></div>