Resettable Searchable Dropdown – via Context

SearchableContext.js

// this is an attempt at not adding redux just yet

import React, { createContext, useContext, useCallback, useEffect, useState } from 'react'
const Context = createContext({})


const Provider = React.memo(({ value, children }) => <Context.Provider value={value}>
  {children}
</Context.Provider>)


export const SearchableProvider = (props) => {
  const [value, setValue] = useState(initialState)
  const reset = () => setValue('')
  
  return <Provider {...props} value={{value, reset}}/>
}

export const useSearchableContext = () => useContext(Context)

export default SearchableDropdown = ({ onSelect }) => {
  return <Context.Consumer>
    ({ value }) => (<SearchableInput value={value} />)
  </Context.Consumer>
}

SearchableUsers.js

import React from 'react'
import { SearchableDropdown } from './SearchableContext'

export default UserManagement = ({ onSelect }) => {
  const { reset } = useSearchableContext()
  
  const onSearch = async (query) => {
    const list = await fetchUsers(query)
    reset()
  }

  return <SearchableDropdown onSelect={(user) => onSelect(user, { reset })}/>)
}

UserManagement.js

import React from 'react'
import { SearchableProvider } from './SearchableContext';

export default UserManagement = ({ onSelect }) => {

  const onSelect = (user, { reset }) => {
    handleUserSelected(user)
    reset()
  }

  return <SearchableProvider>
    <SearchableDropdown onSelect={onSelect} />
  </SearchableProvider>
}