CODEWITHSUNDEEP
javascriptreactjs
David Jay
David Jay

Reputation: 353

How to display data in React select

I want to create a filter for movies based on their categories using React select when I displed my data (Categories inside the Select) it didn't work. I've tried a lot but still not working.

I'm a newbie in React so thank you for any help or comments.

-FilterMovie is a function to filter the movie based on its category

ps: Movies are stored in a separate state

This is CategoriesFilter :

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


const CategoriesFilter = ({categories, filterMovie}) => {
    return (
    <div>  
    
    <Select
    className="select-option"
    options={categories}
    placeholder={"type something"}
    />
    </div>
      
    )
}

export default CategoriesFilter;

Filter movies came from app.js

 //filter movies based on their categories
  const filterMovie = (category) => {
    const filterMovie = MoviesData.filter((movie)=> movie.category === category);
    setMoviesList(filterMovie);
  }

Upvotes: 0

Views: 456

Answers (1)

Nick
Nick

Reputation: 16576

It looks like the react-select API requires the options to be formatted as an array of objects with value and label keys. You can do this using a Array.map method. Then, you can pass your filterMovie function directly to the onChange handler of the component.

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

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

Upvotes: 1

Related Questions