How do I filter results based on a drop down in next js

Question

I am trying to filter results based on a selection from a drop down.

Scenario:

I have data coming in from MSSQL into NextJS with the help of Prisma (ORM) and I want to have a filter, preferably a drop-down that will filter the results based on the selection on the drop-down.

Here's what I have done so far;

/checkin/index.js

import Head from "next/head";
import { PrismaClient } from "@prisma/client";
import { NavBar } from "../../components/Layouts/NavBar";
import provs from "../../assets/prov.json";
import { useState } from "react";

const prisma = new PrismaClient();

export async function getServerSideProps() {
const interviews = await prisma.sdesmain.findMany();

return {
  props: { interviews },
};
}

export default function Checkin({ interviews }) {
const [provinceFilter, setProvinceFilter] = useState();
const [filterInterviews, setFilterInterviews] = useState(interviews);

const handleProvinceFilter = (e) => {
  const provCode = e.target.value;
  setProvinceFilter(provCode);
  if (provCode === "all") {
    setFilterInterviews(interviews);
  }
};

const filteredInterviews = filterInterviews.filter((interview) => {
  if (interview.a01_province === provinceFilter) {
    return interview;
  }
});

return (
  <div>
    <NavBar />
    <div className="container mx-auto">
      <div>
        <h1 className="text-3xl font-bold">Interviews checkin</h1>
      </div>
      <div className="flex flex-col py-6">
        <select
          className="bg-gray-200 rounded-md p-2 max-w-md"
          onChange={handleProvinceFilter}
        >
          <option value="all">All</option>
          {provs.map((prov) => (
            <option value={prov.id} key={prov.id}>
              {prov.provinceName}
            </option>
          ))}
        </select>
      </div>
    </div>
    <div className="container mx-auto">
      <h1>Interviews by Household / Cluster </h1>
      <div className="overflow-x-auto relative ">
        <table className="table-auto w-full text-sm text-left text-gray-800 dark:text-gray-800 ">
          <thead>
            <tr>
              <th>Province Code</th>
              <th>Cluster Number</th>
              <th>Household Sample Number</th>
            </tr>
          </thead>
          <tbody>
            {filterInterviews.map((interview) => (
              <tr key={interview.interview_key}>
                <td>{interview.a01_province}</td>
                <td>{interview.a02_clusterNumber}</td>
                <td>{interview.a06_hhsampleNumber}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>
);
}

// Language: javascript
// Path: pages/checkin/index.js

Although data is being displayed, it's not filtered by the drop down.

How do I go about making this to work?

Answer 1

you need to filter interviews using filterInterviews state variable

    const filteredInterviews = interviews.filter(interview => {
      if (provinceFilter === 'all') return true;
      return interview.interview.a01_province === filterInterviews)
    }

then render filteredInterviews instead of interviews

Answer 2

I figured it out.

I was trying to match the select value (of string type) to a number.

I ran the event value e.target.value for the drop down through parseInt(e.target.value) , then match the value with province code from db with the filter function.

  const handleProvinceFilter = (e) => {
    setProvinceFilter(parseInt(e.target.value));
  };

  const filteredInterviews = interviews.filter(
    (interview) => interview.a01_province === provinceFilter
  );