[ ReactJs ] Load More Data ( https://codesandbox.io/s/load-more-data-l3ojq?file=/src/App.js )

App.js

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { title: "first", body: "This Is First" },
        { title: "Second", body: "This Is Second" },
        { title: "Third", body: "This Is Third" },
        { title: "Fourth", body: "This Is Fourth" },
        { title: "Fifth", body: "This Is Fifth" },
        { title: "Sixth", body: "This Is Sixth" },
        { title: "Seven", body: "This Is Seven" },
        { title: "Eight", body: "This Is Eight" },
        { title: "Nine", body: "This Is Nine" },
        { title: "Ten", body: "This Is Ten" }
      ],
      // items: [],
      visible: 2
    };
  }

  loadMore = () => {
    this.setState(prev => {
      return { visible: prev.visible + 2 };
    });
  };

  // componentDidMount() {
  //   fetch("https://jsonplaceholder.typicode.com/posts").then(
  //     res => res.json()
  //   ).then(res => {
  //     this.setState({
  //       items: res
  //     });
  //   }).catch(error => {
  //     console.error(error);
  //     this.setState({
  //       error: true
  //     });
  //   });
  // }

  render() {
    return (
      <section>
        <div>
          {this.state.items.slice(0, this.state.visible).map((item, index) => {
            return (
              <div key={item.id}>
                <h2 className="count">{index + 1}</h2>
                <h4>{item.title}</h4>
                <p>{item.body}</p>
              </div>
            );
          })}
        </div>
        {this.state.visible < this.state.items.length && (
          <button onClick={this.loadMore} type="button">
            Load more
          </button>
        )}
      </section>
    );
  }
}

export default App;