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
     });
     setItems(updatedItem)

   }
  return (
    <div>

        <select onChange={(e) => filterItem(e.target.value)}  > 
          <option >Female</option>
          <option>Male</option>

        </select>


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

          </div>
        ))}
      </div>
  );
}

export default Dropdown;