How to add a select all checkbox in MenuList

[hermbo]

I seem to be having troubles making changes to the MultiList component. Every other component I seem to mess with works, but I cannot get anything to change in my dropdown using MultiList.

What I would like is a simple checkbox at the top of the dropdown list, this checkbox will have a click event listener to call a function. After that I can take it from there.

Here's what my code looks like currently and nothing is changing:

import Select, { components } from 'react-select'

const SelectAllBox = props => {
    return (
      <components.MenuList {...props}>
        <div><input type="checkbox" onClick={functionCall()} /> Select all</div>
        {props.children}
      </components.MenuList>
    )
}

<Select
  name={'drugNames'}
  value={selected.drugNames}
  options={drugNames}
  closeMenuOnSelect={false}
  components={{ SelectAllBox }}
  isMulti
  ClearIndicator
  hideSelectedOptions={false}
  placeholder={'Select drug name'}
/>

Any ideas why this code isn't working? I'm running react-select@3.1.1

[hermbo]

Found my problem after posting this, I didn't know I needed to use the same const name as the component. I simply renamed SelectAllBox to MenuList 👍

If anyone else wants to do this though here's my completed code:

const handleSelectAll = (e, props) => {
  e.preventDefault()
  let current = props.selectProps

  // If all options are selected clear them else set them all
  if (current.value.length === current.options.length) {
    props.clearValue()
  } else {
    props.setValue(props.options)
  }
}

const MenuList = props => {
  let name = props.selectProps.name
  let current = props.selectProps
  return (
    <components.MenuList {...props}>
      <div className="form-select-all" onClick={(e) => handleSelectAll(e, props)}>
        <label>
          <input type="checkbox" defaultChecked={current.value.length === current.options.length} />
          {current.value.length === current.options.length ? 'Deselect' : 'Select'} all
        </label>
      </div>
      {props.children}
    </components.MenuList>
  )
}

return (
  <Select
    name={'drugNames'}
    value={}
    options={}
    components={{ MenuList }}
  />
)