I want to paginate data. It is working fine but when I search for specific data it always shows in the first page

What I want is to paginate my data but the problem is when I’m searching for specific data if I’m on page 3 the result shows on page 1 always and I can’t see anything because I was on page no 3. I want to go to page 1 automatically when I’m searching for something. Also when I press the next button if there is no data at all it still increases the page number.

Here is my code:

import { React, useState, useEffect } from "react";
import UpdateDialogue from "./UpdateDialogue";

function List(props) {
  const API_URL = "http://dummy.restapiexample.com/api/v1/employees";
  const [EmployeeData, setEmployeeData] = useState([]);
  const [pageNumber, setPageNumber] = useState(1);
  const [postNumber] = useState(8);

  const currentPageNumber = pageNumber * postNumber - postNumber;

  const handlePrev = () => {
    if (pageNumber === 1) return;
    setPageNumber(pageNumber - 1);
  };
  const handleNext = () => {
    setPageNumber(pageNumber + 1);
  };

  useEffect(() => {
    fetch(API_URL)
      .then((response) => response.json())
      .then((response) => {
        setEmployeeData(response.data);
      })
      .catch((err) => {
        console.error(err);
      });
  }, []);

  const filteredData = EmployeeData.filter((el) => {
    if (props.input === "") {
      return el;
    } else {
      return el.employee_name.toLowerCase().includes(props.input)
    }
  });

  const paginatedData = filteredData.splice(currentPageNumber, postNumber);
  
  return (
    <>
      <ul>
        
        {paginatedData.map((user) => (
          <UpdateDialogue user={user} key={user.id} />
        ))}
      </ul>
      <div>Page {pageNumber} </div>
      <div>
        <button style={{marginRight:10}} onClick={handlePrev}>prev</button>
        <button onClick={handleNext}>next</button>
      </div>
    </>
  );
}

export default List;

Answer

Maybe with a useEffect on your input:

useEffect(() => {
  if (props.input) {
    setPageNumber(1);
  }
}, [props.input]);

That way, whenever your input changes, your page number is set to 1.

Advertisement

Answer