I have an array of objects(a list of ments to some item), and I want to display it on the page. But not all of those ments! First 10 for example. And below that list i wanna render some kinda button. And if a user wants to see next 10 ments, he needs to click on that button.

Something like 'show more' in 'Youtube'.

I can render all those ments! But I don't need that. I need to display 10 ments ... each time the button is being clicked.

Can anyone help me please Thanks

I have an array of objects(a list of ments to some item), and I want to display it on the page. But not all of those ments! First 10 for example. And below that list i wanna render some kinda button. And if a user wants to see next 10 ments, he needs to click on that button.

Something like 'show more' in 'Youtube'.

I can render all those ments! But I don't need that. I need to display 10 ments ... each time the button is being clicked.

Can anyone help me please Thanks

• javascript
• reactjs
• redux
• flux

• please show what you have tried so far, or post some code to show where you are getting stuck. – ShahiM Commented Aug 29, 2016 at 9:46
• 1 I presume (from the tag) that you get the ments from your flux store. Instead of getting all ments and then filtering in the ponent, you'd better get only 10 ments from the server, and build a new flux action like LOAD_MORE_COMMENTS that will be called when the user clicks on a button, that would make the ajax call to plete the dataset. – Pandaiolo Commented Aug 29, 2016 at 9:47
• @Pandaiolo That's the best option. Let the server handle the number of ments passed to the client. – Ademola Adegbuyi Commented Aug 29, 2016 at 9:58

2 Answers 2

So let's assume that you have 20 ments in an array

var ments = getComments() // returns list of 20 ments

Then you can use slice to get the first 10 ments, then map them to actual HTML

var mentsAsHTML = ments.slice(0, this.state.limitTo).map(ment => {
   return <li key={ment.id}>{ment.text}</li>
});

To add the "Load more" functionality, we will have limitTo state

limitTo = 10;

And with each "Load more" action, we will increment this limit by 10 for example.

onLoadMore () {
   this.setState({
      limitTo: this.state.limitTo + 10
   });
}

from the below code you can get the basic idea of how a loadmore ponent can be implemented from scratch,

import React, { Component } from 'react';

class Router extends Component {
  constructor() {
    super();
    this.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 4, 3, 2, 1, 5];
    this.state = {
      count: 5,
      defaultCount: 5,
    };
  }
  handleCount() {
    let count = this.state.defaultCount;
    count = count + this.state.count;
    this.setState({ count });
  }
  render() {
    const count = this.state.count;
    const showData = (item, index) => {
     return ((index < count) ? <li>{item}</li> : '');
    };
 return (
   <div>
     {this.data.map(showData)}
     <a href="#" onClick={this.handleCount.bind(this)}>Load</a>
   </div>
  );
 }
}

what I have done here:

i) take an array with 15 elements;

ii) initialize the state with count and defaultcount

iii) then i have map the data array to show the item on showData function

iV) on the return of showData function i have checed if the index of array element is less than the count variable.

v) and each time you click on loadmore button it will call the handleCount function and increate the count value by defaultCount.

vi) after the count variable updated than more 5 array element will be shown on this example

that's it, i hope you get the basic idea of lodemore