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

259
Vistas
React MUI 4 SelectInput.js:340 Uncaught TypeError: Cannot read properties of undefined (reading 'value')

This error happens when you provide an empty array as options.

The error log:

SelectInput.js:340 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
    at SelectInput.js:340:1
    at Array.map (<anonymous>)
    at SelectInput.js:339:1
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)
    at performSyncWorkOnRoot (react-dom.development.js:22269:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23620:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)
    at react-dom.development.js:23324:1
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

In my case my component looked like this. You should focus on the options part only thought.

<FormControl error={error}>
  <InputLabel>{label}</InputLabel>
  <Select
    value={value}
    onChange={onChange}
    label={label}
  >
    {
      options.length &&
        options.map((option, i) => {
          return (<MenuItem className={classes.menuItem} key={i} value={option}>{option}</MenuItem>)
        })
      }
  </Select>
  { error && <FormHelperText>{ helperText }</FormHelperText> }
</FormControl>

When I changed my component to look like this

<FormControl error={error}>
  <InputLabel>{label}</InputLabel>
  <Select
    value={value}
    onChange={onChange}
    label={label}
  >
    {
      // --> Notice below changes
      options.length > 0 && // --> Changes from `options.length ? ...` to `options.length > 0 && ...`
        options.map((option, i) => {
          return (<MenuItem className={classes.menuItem} key={i} value={option}>{option}</MenuItem>)
        })
      }
  </Select>
  { error && <FormHelperText>{ helperText }</FormHelperText> }
</FormControl>

And then it didn't happen again.

If you want longer explanation, the error log was referring to InputJS:340:1 which refers to the following line

React.useEffect(function () {
  if (!foundMatch && !multiple && value !== '') {
    var values = childrenArray.map(function (child) {
      return child.props.value; // ---> This line specifically
    });
    console.warn(["Material-UI: You have provided an out-of-range value `".concat(value, "` for the select ").concat(name ? "(name=\"".concat(name, "\") ") : '', "component."), "Consider providing a value that matches one of the available options or ''.", "The available values are ".concat(values.filter(function (x) {
      return x != null;
    }).map(function (x) {
      return "`".concat(x, "`");
    }).join(', ') || '""', ".")].join('\n'));
  }
}, [foundMatch, childrenArray, multiple, name, value]);

Let's just say the options.length ? ... conditional lets the "whatever value" slip through while SelectInput.js was expecting for it to be an array of children, but instead of getting an array, it's getting that "whatever value".

That's why when child.props.value was expecting a transformed value, it resulted in Cannot read properties of undefined (reading 'value'). Because the child probably doesn't even have props value defined.

about 4 years ago · Juan Pablo Isaza Denunciar
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