Soy nuevo en reaccionar/nextjs y recibo el error "No se pueden leer las propiedades de undefined (leyendo 'valor')". He intentado algunas cosas diferentes, como usar select como solo una etiqueta html, he buscado en el documento react-select, pero no puedo encontrar nada que ayude con este problema.
Aquí está mi código:
import { useState } from 'react'; import Select from 'react-select'; import styles from '../src/styles/Flex.module.scss' const FlexSidebarContainer = ({ sidebarProps }) => { const options = sidebarProps.options const [value, setValue] = useState("") const handleOptionChange = (e) => { let value = e.target.value setValue({ value }) } return ( <form className={styles.form}> {options.map((option, index) => { return ( <div key={index} className={styles.form_item}> <div className={styles.form_label_wrap}> <Select className={styles.form_item_wrap} onChange={handleOptionChange} options={option.items.map(item => ({ value: item.value, label: item.item }) )} defaultValue={option.items.map(item => ({ label: item.item }) )} instanceId={option.items.map(item => ({ instanceId: item.item }) )} /> </div> </div> ); })} </form> ) } export default FlexSidebarContainer
Select no es una etiqueta HTML aquí y onChange no funcionará en ella. Es un componente personalizado, por lo que el evento no estará definido. Use una etiqueta HTML seleccionada o si está usando un componente personalizado, es decir, "Seleccionar", use un controlador de eventos personalizado que se pasará como accesorios al componente Seleccionar.
<select> <option></option> </select>