I'm studying react and so using the react-multiselect-checkboxes library. I'm trying to custom the DropDownButton but without succeed.
Here is the code:
import React, { useState, useEffect } from "react";
import ReactMultiSelectCheckboxes from "react-multiselect-checkboxes";
import DropdownButton from "react-multiselect-checkboxes/lib/DropdownButton.js";
const MultiSelectAll = (props) => {
const [selectedOptions, setSelectedOptions] = useState([]);
useEffect(() => {
setSelectedOptions([{ label: "Tutte", value: "*" }, ...props.options]);
}, []);
const CustomDropDownButton = (props) => {
return (
<DropdownButton {...props} className={[]} onPress={(e) => e.stopProgagation()}>
test
</DropdownButton>
)
}
return (
<ReactMultiSelectCheckboxes
options={[{ label: "Tutte", value: "*" }, ...props.options]}
components={{CustomDropDownButton}}
value={selectedOptions}
onChange={onChange}
setState={setSelectedOptions}
/>
);
};
export default MultiSelectAll;
I'm using the components property but the DropDownButton is still the same select with the label plus the arrow indicator. Is there a way to custom the DropDownButton in the first way? If yes, what i'm doing wrong?