create a product filter in react js-CodePudding

i have this paggination page i have given the codesandbox link below

i am trying to create page filters
based on given dropdown select in react js

this is my sandbox code i that i have made

https://codesandbox.io/s/weathered-bird-7ppy7?file=/src/App.js

when i change expericee price gender i want to show people with based on the given range

CodePudding user response：

You can take a look at this sandbox to see the working example. You should handle the change on select component:

// keep selected gender state
const [gender, setGender] = useState();

//.....

// filter data by gender
const filteredData = data.filter((d) => {
if (gender) {
    return d.gender === gender || d.gender === gender.toLowerCase();
}
    return true;
});

// handle select change
const handleGenderSelect = (e) => {
    setGender(e.target.value);
};

//.....

// handle select change
<select style={styles.sel} onChange={handleGenderSelect}>
  <option> Male</option>
  <option> Female</option>
</select>