Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

134
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda