Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to filter data from select using React and TypeScript

I’m trying to filter the data by select, but I don’t know why my code doesn’t work. In the console I can see that it correctly shows me the selected items (option). I noticed that the problem is onChange, which shows undefined in the console even though the value is correctly shown.

 <FormLabel htmlFor="type">Type</FormLabel>
            <Select
              value={selectedType}
              onChange={(e) => setSelectedType(e.target.value)}
              id="type"
            >
              <option value="mtb">MTB bike</option>
              <option value="country">Country</option>
            </Select>
          </FormControl>

<Box className="grid grid-cols-3 gap-6">
        {currentProducts.map((data) => (
          <Card key={data.id} maxW="sm">
          // rest code

  const currentProducts = selectedType ? products.filter((item) => item.type === selectedType) : products.slice(startIndex, startIndex + productsPerPage)

 const [selectedType, setSelectedType] = useState("");

export const products: Products[] = [
  {
    id: 1,
    price: 1800,
    type: "country",
  },

export interface Products {
id: number;
price: number;
type: string;
}
Tags:

2

Answers


  1. 0

    You have to use useEffect / Upon choosing from select, call a function update the selectedType state and the currentProducts.

    Login or Signup to reply.
  2. 0

    Apparently there is nothing incorrect in the code you have shared. When I tried to replicate the issue with the code below, it did not fail, and it worked well. I request you may please go through this code use it to match it with yours, perhaps it may help you to spot the cause of failure. Or if you can share your original code via Github, I shall take a detailed look.

    App.js

    import { useState } from 'react';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';

export default function App() {
  const [selectedType, setSelectedType] = useState('');
  const currentProducts = selectedType
    ? products.filter((item) => item.type === selectedType)
    : products;

  return (
    <FormControl>
      <FormLabel htmlFor="type">Type</FormLabel>
      <select
        value={selectedType}
        onChange={(e) => setSelectedType(e.target.value)}
        id="type"
      >
        <option value=""></option>
        <option value="mtb">MTB bike</option>
        <option value="country">Country</option>
      </select>
      <FormLabel component="legend">
        Product list filtered on type : {selectedType}
      </FormLabel>
      <ol>
        {currentProducts.map((p) => (
          <li key={p.id}>Product Id {p.id}</li>
        ))}
      </ol>
    </FormControl>
  );
}

const products = [
  {
    id: 1,
    type: 'country',
  },
  {
    id: 2,
    type: 'mtb',
  },
  {
    id: 3,
    price: 1800,
    type: 'country',
  },
  {
    id: 4,
    price: 1800,
    type: 'mtb',
  },
];

    npm list

    [email protected]
├── @emotion/[email protected]
├── @emotion/[email protected]
├── @mui/[email protected]
├── @mui/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

    Test run:

    1. On load:

    enter image description here

    1. On selection of type

    enter image description here

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search