I have used React-Select to make a search bar for my project. The search bar should have three options for advantages and three for disadvantages that can be toggled from another component.
This all works as intended until I make a selection and then click refresh page and I get the following error
Here is a Gist of the component in question
https://gist.github.com/Uken81/2dc41c937e587c0b9f8b595426d1573c
Here is the code I believe is causing the error
useEffect(() => {
const createSearchOptions = () => {
let adsArr = AdvantagesArray.map((opt) => ({
label: opt.title,
value: opt,
category: opt.type
}));
let disadsArr = DisadvantagesArray.map((opt) => ({
label: opt.title,
value: opt,
category: opt.type
}));
setAdvantageOptions(adsArr);
setDisadvantageOptions(disadsArr);
};
createSearchOptions();
}, []);
const formatOptionLabel = ({ label, category }) => (
<div style={category === 'advantage' ? { color: 'seagreen' } : { color: 'brown' }}>{label}</div>
);
<div className="toggle-and-search">
<ToggleAdvantageDisadvantage />
<Select
className="searchBar"
options={isChoosingAdvantages ? advantageOptions : disadvantageOptions}
value={selectInput}
isMulti
onChange={handleChange}
formatOptionLabel={formatOptionLabel}
/>
</div>
After some research I tried wrapping the label variable found on line 73 in double curly braces like this {{label}}. When I tested this I got a different error as soon as I made a selection on the search bar
I believe this must mean that it is the label variable that is causing the error but im not sure how I can stop the error if the user refreshes while maintaining the functionality of my search bar. I have tried just extracting the stringed titles to an array and using that but select no longer works properly. I have also tried other ways of using arrays here but all have broken my search bar.
If anyone can help me fix this bug I would be very grateful and if anyone can explain to me exactly what is going on that would be wonderful.