Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

131
Views
React Select Crashes on Page Refresh

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

enter image description here

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

enter image description here

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.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!