How in React.JS to make sequential output from an array of JSON data?

Question

JavaScript

class App extends React.Component {

    constructor() {
      super();
      this.state = {
        names: require("json!./data.json")
        }
    }

   render() {
   
      return (
              <div class="pagination">
                {this.state.names.map((name,i)=> <ListName key={i} data={name} />)}
              </div>
            
      );
   }
}

class ListName extends React.Component {
  render(){
    return (
     <p>{this.props.data.name}</p>
    )
  }
}

The JSON file contains thousands of records, how to display with loading, for example, 10 is displayed first, then +10 more when scrolling, etc.?

Answer 1

You need to make an API that will return a certain number of records. Let me explain: you need to make a backend, so to speak. Can be written to node.js/php/python/etc. Perhaps there is some ready-made service for such things, but I did not look.
For example: GET request to api/loadjson?limit=100&offset=0 (issue 100, offset 0, then there will be a request issue 100 - offset 100, issue 100 offset 200, etc.), i.e. in theory, the situation is as follows: you load the first N records and set the handler to window.onscroll (example here ), then choose at what interval in pixels you plan to load more and load N more records, and so on.
Loading is carried out using xhr (or, if you like, ajax) requests (I like isomorphic-fetch)
From ready-made components, I recommend react-virtualized . It looks a bit difficult to set up at first, but it's one of the best documentation libraries I've seen. There is everything! Just in case, there is a gitter chat, where the developer himself is also present (EN language).