const options = ['cooking', 'piano', 'painting', 'design', 'football', 'crafting', 'sleeping']

​

function App () {

  const [skills, setSkills] = React.useState([])

​

  return (

    <div>

      My skills are: {skills.join(', ')}

      <br />

      <Multiselect

        options={options}

        selected={skills}

        onChange={setSkills}

      />

    </div>

  )

}

​

function Multiselect ({ options, selected, onChange }) {

  const [searched, setSearched] = React.useState('')

  const [isOpen, setIsOpen] = React.useState(false)

  const filteredOptions = React.useMemo(() => {

    return options.filter(option => option.includes(searched))

  }, [options, searched])

  const handleSearchedSet = e => {

    setSearched(e.target.value)

  }

  const handleSelect = (option) => {

    const isSelected = selected.includes(option)

    let newOptions

    if (isSelected) {

      // if selected, remove the clicked option

      newOptions = selected.filter(o => o !== option)