text: import React, { useState, useEffect } from 'react'
  import { Dropdown, Form, FormControl, Button } from 'react-bootstrap'
  
  function SearchBar({ list, attribute, handle_click }) {
  
      const [ str, setStr ] = useState('')
  
  
      return (
          <Dropdown autoClose='outside'>
          
              <Dropdown.Toggle variant='secondary'>
                  Categories
              </Dropdown.Toggle>
              
              <Dropdown.Menu style={{padding:5}} >
              <FormControl placeholder='Search...' onChange={e => setStr(e.target.value)}  />
                  {
                      str === ''
                      ? list.map((item, key) => (
                          <Dropdown.Item 
                              key={key}
                              onClick={() => handle_click(item._id.$oid) }
                          >
                              {item[attribute]}
                          </Dropdown.Item>
                      ))
                      : list.filter((item) => item[attribute].toLowerCase().includes(str.toLowerCase())).map((itemx, key) => (
                          <Dropdown.Item 
                              key={key}
                              onClick={() => handle_click(itemx._id.$oid) }
                          >
                              {itemx[attribute]}
                          </Dropdown.Item>
                      ))
                  }
              </Dropdown.Menu>
  
          </Dropdown>
      )
  }
  
  export default SearchBar
  