Search and page in ReactJS

Question

I am working with ReactJS by listing data displayed in a table and filtering from an input.

The search works fine as long as you do it from page number 1. If I search from a different page than the first one and the data entered is not present in the page where I find the data in the Table disappear and return until I eliminate the word of the search.

This is my code:

State:

  state = {
    searchText: '',
    currentPage: 1,
    itemsOnPage: 3,
  };

Table with Filter:

  dataTable = () =>{

const { currentPage, itemsOnPage, searchText } = this.state;
const { clients } = this.props;

const filterData = clients.filter( client => {
  return client.name.toLowerCase().indexOf(searchText.toLowerCase() ) !== -1
})

const indexOfLastItem = currentPage * itemsOnPage;
const indexOfFirstItem = indexOfLastItem - itemsOnPage;
const currentItems = filterData.slice(indexOfFirstItem, indexOfLastItem);


const renderItems = currentItems.map((data, key) => {
      return (

        <Client
          key={key}
          client ={data}
        />
      )
    });
    return renderItems;
  }

Pagination:

  paginationNumbers = () =>{
    const { clients } = this.props;
    const { itemsOnPage, searchText } = this.state;
    const filterData = clients.filter( client => {
      return client.name.toLowerCase().indexOf(searchText.toLowerCase() ) !== -1
    })
    const pagesToNumbers = [];
    for (let i = 1; i <= Math.ceil(filterData.length / itemsOnPage); i++) {
      pagesToNumbers.push(i);
    } 

    let lastItem = pagesToNumbers[pagesToNumbers.length-1];

    const numbers = pagesToNumbers.map(number => {
      return (
          <li className="waves-effect"
           key={number} 
           id={number}
           className={ this.state.currentPage === number ? "active" : null }
           onClick={this.handleClick} style={ styles.paginationButtons }
           >
               {number}
          </li>
      );
    });

    return (
      <React.Fragment>
        <li className={ this.state.currentPage === 1 ? "hide" : "waves-effect" }
        onClick={this.handlePrevious}
        >
        <i className="material-icons">chevron_left</i></li>
          { numbers }
        <li className={ this.state.currentPage === lastItem ? "hide" : "waves-effect" }
         onClick={this.handleNext}
        >
        <i className="material-icons">chevron_right</i></li>
      </React.Fragment>
    );
  }

Button actions:

  handlePrevious = () => {
    this.setState({
      currentPage: this.state.currentPage -1 
    })
  }

  handleNext = () => {
    this.setState({
      currentPage: this.state.currentPage +1 
    }) ;
  }

  handleClick = (e) => {
    this.setState({
        currentPage: Number(e.target.id)
      });
  }

On change Input to filter:

  onChange = e => {
    this.setState({ searchText: e.target.value });
  }

Here the code on render:

        <input
            name="searchText"
            value={searchText}
            onChange={this.onChange}
          />  

      <div className="col s12">
          <input
            name="searchText"
            value={searchText}
            onChange={this.onChange}
          />
      </div>

Thanks a lot!

Answer 1

Change the page back to 1 when the user changes the search text (when the filter changes). because when the search text changes, the resulting data set also changes. the result may not contain enough data for a second page.