Is it possible to map only a portion of an array? (Array.map())
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>
Array.reduce should do what you're asking for. Just change the if statement depending on which range you want.
var excludeAfterIndex = 5;feed.reduce((mappedArray, item, index) => { if (index > excludeAfterIndex) { // Whatever range condition you want mappedArray.push(<FeedItem key={index} data={item}/>); } return mappedArray;}, []);
If you just want to map a portion of an array, you should first filter() your array to obtain the expected portion according to conditions :
array.filter(item => <condition>).map();