Load More in react

 import React  from 'react';

import { NavLink } from 'react-router-dom';

import './assets/css/bootstrap.css'; 

import './assets/css/styles.css';

import './assets/css/custom.css';

import Hlogo from  './assets/images/hlogo.png';

import Footer from  './include/Footer';

 

 

class News extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      items: [],

      visible: 10,

      error: false

    };

    this.loadMore = this.loadMore.bind(this);

  }

  loadMore() {

    this.setState((prev) => {

      return {visible: prev.visible + 10};

    });

  }

  componentDidMount() {

    fetch("https://msaini.in.net/api/newsList").then( 

      res => res.json()

    ).then(res => {

      this.setState({

        items: res

      });

    }).catch(error => {

      console.error(error);

      this.setState({

        error: true

      });

    });

  }

  render() {

  return (

    <>

<div className="header sticky" id="myHeader"> 

<img src={Hlogo} className="hbg" />

<div class="searchbox" id="latestmessage">

  <input type="text" name="search" id="search" value=" ram aram saa"  />

</div>

</div>   

<div class="hspace">--</div> 

<section class="content newsboxlist">

{this.state.items.slice(0, this.state.visible).map((item, index) => {

              return (

                 

<div className="listItem">

<NavLink exact to={'/newsdetail/'+item.id} > 

<div className="newsList">

<div className="nwsDtl1" style={{ padding:"5px" }}>

<table style={{ width:"100%" }} >

    <tbody>

<tr>

<td  style={{ width:"15%" }}   >

<img src={item.path} alt="news logo" className="newsImg" /> 

</td>

<td  style={{ paddingLeft:"5px", color: "#000", fontSize:"16px", width:"85%", verticalAlign:"top" }} >

{ item.title }

</td> 

</tr>

</tbody>

</table>  

 

</div>

</div> 

</NavLink>

</div>

 

              );

            })}

 

 

 

<div id="load_more">

<center>

{this.state.visible < this.state.items.length &&

             <button onClick={this.loadMore} type="button" className="load-more">Load More </button>

          }

</center>

</div>

</section>

    <Footer/>

    </>

  );

}

}

export default News;

Codeignioter Code :

function newsList(){ $result = $this->Api_model->getNewsList(); $data = array(); if(!empty($result)){ foreach($result as $row){ $data[] = array( 'id' => $row['id'], 'title' => $row['title'], 'path' => base_url('upload/resizer/resizer.php?file=../news/').$row['path'].'&width=60&height=60&action=resize&quality=100' ); }} echo json_encode($data); //$this->response($data, REST_Controller::HTTP_CREATED); }