Question

Technologies:

javascript

reactjs

Tolerim

a month ago

How can I establish a search input that updates the data on another page or component using Next.js?

As a developer, I am presented with a task of generating a table with filterable data in response to user input. The application has several pages, and the table displays static data from a JSON file. The table is composed of two components, the Header and Table components. The Header component consists of a search box that allows users to search for data based on their input. Meanwhile, the Table component renders the data in table format. I have managed to implement the search function to filter the data and redirect the user to the table page upon submitting an input. However, I am still unsure of how to refresh or redraw the Table component with the filtered data.

Answers(1)

Accepted Answer

To redraw the table, you need to update the state of the Table component with the filtered data. One way to do this is to pass a state variable and a function to update that variable as props to the Table component, and then update the state with the filtered data in the search function in the Header component. Here is an example of how to do this: 1. Update the Table component to accept a state variable and a function to update that variable as props:

import { useState } from 'react';
import styles from './table.module.css';

export default function Table({ data, filteredData, setFilteredData }) {

  const renderItems = arr => {
    const items =  arr.map((item, i) => {
      return (
        <tr key={i}>
          <td>
            {item.title}
          </td>  
        </tr>
      )
    })

    return items 
  }

  return (
    <div className={styles.table}>
      <table>
        <thead>
          <tr>
            <th>
              Title
            </th>         
          </tr>
        </thead>
        <tbody>
          {renderItems(filteredData || data)}
        </tbody>
      </table>
    </div>
  );
}

2. Pass the state variable and the function to update that variable as props to the Table component in the TablePage component:

import { useState } from 'react';
import data from '@/data.json';
import Header from '@/components/header/header.js';
import Table from '@/components/table/table.js';

export default function TablePage(props) {
  const [filteredData, setFilteredData] = useState(null);

  return (
    <div>
      <Header data={data} setFilteredData={setFilteredData} />
      <main>
        <Table data={data} filteredData={filteredData} setFilteredData={setFilteredData}></Table>
      </main>
    </div>
  )
}

3. Update the search function in the Header component to filter the data and update the state with the filtered data using the function passed as props:

import { useRouter } from 'next/router'
import styles from './header.module.css';

function search(e, data, router, setFilteredData) {
  e.preventDefault();
  const string = e.target.querySelector('input').value;
  const result = data.filter(item => item.title.match(string));
  setFilteredData(result);
  router.push('/table_page');
}

export default function Header (props) {
  const { data, router, setFilteredData } = props;

  return (
    <header className={styles.header}>
      <div className={styles.search}>
        <form onSubmit={(e) => {search(e, data, router, setFilteredData)}}>
          <button type='submit'></button>
          <input type='search' placeholder='Type song or artist name'/>
        </form>
      </div>
    </header>
  )
}

Now, when the user types in the input and submits the form, the search function will filter the data, update the state with the filtered data using the function passed as props, and redirect the user to the table page. The Table component will then render with the filtered data if it exists, or with the original data if it doesn't.