CODEWITHSUNDEEP
reactjs
Rohit Verma
Rohit Verma

Reputation: 3785

How to add next & prev buttons with table in reactJs?

I have a table where data is inserted from a JSON. Using React.Component, the table creation is below:

<tbody>
  {DATA.map(x => (
    <tr>
    <td>{x.date}</td>
    <td>{x.name}</td>
    <td>{x.language}</td>
    <td><a href={x.link} target="_blank" class="btn">Click to Listen</a></td>
    </tr>
  ))}
</tbody>

Data displaying properly but I have to add next & prev buttons with the table. How can I do that?

At least 5 <tr> should display simultaneously.

[![enter image description here][1]][1]

Upvotes: 0

Views: 1324

Answers (1)

Someone Special
Someone Special

Reputation: 13588

Since you show so little code, i assume you are using react, and using functional component.

const [ page, setPage ] = useState(0); //create page state

const pageData = useMemo(() => { //use useMemo to memorize the page

     return DATA.slice(page*5, (page*5)+5)
},[page])

const nextPage = () => setPage(prev => prev+1) //next page
const prevPage = () => setPage(prev => prev > 0 ? prev-1 : prev) //prev page - need to add condition here so it doesn't go below 0

Reference to Slice method

in your rendering, use pageData instead of DATA, example

<tbody>
  {pageData.map(x =>
    <tr>
      <td>{x.date}</td>
      <td>{x.name}</td>
      <td>{x.language}</td>
      <td><a href={x.link} target="_blank" class="btn">Click to Listen</a></td>
    </tr>
  )}
</tbody>

You may then create buttons to call nextPage and prevPage e.g.

<button onClick={nextPage}>Next</button>

You have to add your own codes to check for maximum number of pages, and minimum number of pages so it doesn't throw error.

CodeSandBox

Upvotes: 1

Related Questions