DEV Community

SM Toufiqul Hoque
SM Toufiqul Hoque

Posted on • Updated on

Drop down filtering with react

Our goal is to change our data dynamically using Drop down filtering here is the code ...

import React, { useState } from 'react';
import mockData from '../mockData.json';

const Dropdown = () => {
  const [items, setItems] = useState(mockData);

   const filterItem=(gen)=>{
     const updatedItem=mockData.filter((curElem)=>{
       return curElem.gender===gen

  return (

        <select onChange={(e) => filterItem(}  > 
          <option >Female</option>


        { => (
          <div key={} style={{ margin: '30px' }}>
            <div>{`Band: ${val.first_name}`}</div>
            <div>{`Albums: ${val.last_name}`}</div>
            <div>{`Members: ${}`}</div>
            <div>{`Members: ${val.gender}`}</div>


export default Dropdown;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)