How to filter items using function in React

Question

I'm using a react select to filter my movies by categories but my function is not working, when I click on the element to filter, it delete all the movies on the UI

This is my Filter components :

import React from 'react';
import Select from 'react-select';


    const CategoriesFilter = ({categories, filterMovie}) => {
        const options = categories.map((c) => ({ value: c, label: c }));
        
        return (
        <div>  
        <Select
        className="select-option"
        options={options}
        placeholder={"type something"}
        onChange={filterMovie}
        />
        </div>
          
        )
    }
    
    export default CategoriesFilter;

This is my filter function and state from my APP js

const [moviesList, setMoviesList] = useState(MoviesData);
     const filterMovie = (category) => {
        const filterMovie = MoviesData.filter((movie)=> movie.category === category);
        setMoviesList(filterMovie);
      }

Where do you think the problem comes from?

Thank you guys

Are you sure that the correct `category` variable is passed to your function from the `Select`? Try to console.log it within your function and see... — k-wasilewski, May 02 '21 at 18:29
This is actually the problem, I lost the origin Data because when I want to pass the category into "Select" it didn't want to work, so i tried to map through the category to get all the category it shows in the select but it not linked to the data to filter? — David Jay, May 02 '21 at 18:34

score 1 · Accepted Answer · answered May 02 '21 at 18:36

The problem is that your callback function is receiving the object you set into Select

const options = categories.map((c) => ({ value: c, label: c }));

and you are comparing

const filterMovie = MoviesData.filter((movie)=> movie.category === category);

it should be

const filterMovie = MoviesData.filter((movie)=> movie.category === category.value);

Check:

const CategoriesFilter = ({ categories, filterMovie }) => {
  const options = categories.map((c) => ({ value: c, label: c }));

  return (
    <div>
      <Select
        className="select-option"
        options={options}
        placeholder={"type something"}
        onChange={filterMovie}
      />
    </div>
  );
};

const MoviesData = [
  {
    title: "Foo",
    category: "horror"
  }
];

export default function App() {
  const [moviesList, setMoviesList] = useState(MoviesData);
  const filterMovie = (category) => {
    console.log(category);
    const filterMovie = MoviesData.filter(
      (movie) => movie.category === category.value
    );
    setMoviesList(filterMovie);
  };
  console.log(moviesList);
  return (
    <div className="App">
      <CategoriesFilter
        categories={["horror", "action"]}
        filterMovie={filterMovie}
      />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Thank you so much Vinicius, that was so helpful. Can you please check this problem too that i've had with Pagination :D : https://stackoverflow.com/questions/67357707/how-to-make-a-button-pagination-works-in-react — David Jay, May 02 '21 at 18:53
how about this one please :) : Toggle in react https://stackoverflow.com/questions/67362410/how-to-to-toggle-a-button-in-react-and-increment-the-number-by-1-or-1 — David Jay, May 03 '21 at 01:01

How to filter items using function in React

1 Answers1