I am newish to React and am using React Select (https://react-select.com/) to create a dropdown list. I want to wrap this in my own component, so I can send React Select a specific set of props based off the props I give the wrapping component.
Whilst I have wrapped React Select in my own component fine, I am unable to figure out how to set React Select’s states with my wrapping component’s props.
Eg I want to set the isDisabled value, and have the following:
import React from "react";
import { useState } from "react";
import Select from 'react-select';
import './select.scss';
import PropTypes from 'prop-types';
const MySelect = ({ options, disable }) => {
const [isDisabled, setIsDisabled] = useState(disable);
return (
<Select
options={options}
isDisabled={isDisabled}
/>
);
};
MySelect.propTypes = {
disable: PropTypes.bool,
options: PropTypes.array,
};
MySelect.defaultProps = {
disable: false,
options: [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
};
export default MySelect;
Whilst React Select does respect the disable
prop when I set the default, eg:
MySelect.defaultProps = {
disable: true,
It does not respect it when I call the component itself, eg:
<MySelect options={someOptions} disable={true} />
Would anyone know what I’m doing wrong here?