How to reload a div content with react

Question

I'm trying update the elements listened in a div.
I get an array of objects

const elements = [
    {
      title: '0',
      url: 'url',
      description: 'description',
      published: '2020-10-10',
      updated: '2020-10-10',
      afected: {
        title: 'afected',
        url: 'afected'
      }
    },
    {
      title: '1',
      url: 'url',
      description: 'description',
      published: '2020-10-10',
      updated: '2020-10-10',
      afected: {
        title: 'afected',
        url: 'afected'
      }
    },
    {
      title: '2',
      url: 'url',
      description: 'description',
      published: '2020-10-10',
      updated: '2020-10-10',
      afected: {
        title: 'afected',
        url: 'afected'
      }
    },
    {
      title: '3',
      url: 'url',
      description: 'description',
      published: '2020-10-10',
      updated: '2020-10-10',
      afected: {
        title: 'afected',
        url: 'afected'
      }
    }
];

after I have my variables and method to create a paginate

const rowsPerPage = 2;
  let init = 0;
  let end = rowsPerPage -1;
  const pages =  Math.ceil(elements.length / rowsPerPage);
  let rowsToShow = [];

  let paginate = (page) => {
    end = (page * rowsPerPage);
    end = end >= elements.length ? elements.length : end;
    init = (page * rowsPerPage) - rowsPerPage ; 
    rowsToShow = elements.slice(init, end);
  }

paginate(1);

and then I render the div whit the elements

return <Wrapper>
    <div className='container'>
      <div className='elements'>
        { elements && <div>
          { rowsToShow.map((item, index) =>  <TextCardLayoutComponent
            key={ index }
            title={ item.title }
            url={ item.url }
            description={ item.description }
            published={ item.published } 
            updated={ item.updated }
            afectedTitle={ item.afected.title }
            afectedUrl={ item.afected.url } /> )
          }
          </div>
        }
        {_.times(pages, (i) => {
            return <a onClick={ () => paginate( i+1 ) }> { i+1 } </a>
        })}
      </div>
    </div>
  </Wrapper> 
}

export default LayoutComponent;

so, I need when the function paginate is called update the elements in the view to the variable rowsToShow, for now I already have the new array of elements to show in 'rowsToShow' but I need to update the view whit this array

Answer 1

you need to store the stuff you want to render in state. then you can manipulate that state to show as much or as little as you want per page. something like this should work that you can adapt for your code

const LayoutComponent = () => {
   const [data, setData] = useState(elements) // I'm initialising state with your elements array
   const [pagination, setPagination] = useState({start: 0, end: 0}) // this state here is to define what we should show on the pages

   return (
     <div>

       // here you can slice the data array to show how many elements should show
       {data.slice(pagination.start, pagination.end).map((element) => {
          <div> 
            {element.title} 
            {element.description} 
           // obviously you can render here as much as you like
         </div>
       })
      <div>
      
       // here we can set pagination state to then render different elements in the state
       <div onClick={() => setPagination({start: 0, end: 2})}> Page 1 </div>
       <div onClick={() => setPagination({start: 2, end: 4})}> Page 2 </div>
     </div> 
     </div>

    )
}

that's sort of pseudo code and you may need to adapt a bit but let me know if it helps!