0

tengo un select para seleccionar una categoria a la hora de añadir un item a un crud con react (con firestore). Funciona bien si selecciono un valor distinto al que esta por defecto pero si dejo el valor por defecto, sin cambiarlo, no me coje el valor de la categoria. Debe ser porque para que el useState tome el valor del select lo hace en el evento onChange(), pero como al dejar el que esta por defecto no lanza el evento onChange() no me toma ningun valor.¿Se os ocurre alguna forma de solucionar esto? Este es el codigo relevante:

const [tareas, setTareas] = React.useState([])
const [tarea, setTarea] = React.useState('')
const [modoEdicion, setModoEdicion] = React.useState(false)
const [id, setId] = React.useState('')
const [categorias, setCategorias] = React.useState([])
const [categoria, setCategoria] = React.useState([])

    ...

          <form onSubmit={modoEdicion ? handleUpdate : agregar}>
            <input 
              type="text"
              placeholder="Ingrese tarea"
              className="form-control mb-2"
              onChange={e => setTarea(e.target.value)}
              value={tarea}
            />
            <select onChange={c => setCategoria(c.target.value)} value={categoria}>
                    {
                    categorias.map(item2 => (
                    <option value={item2.nombre}>{item2.nombre}</option>
                    ))
                    }
            </select>
            <button 
              className={
                modoEdicion ? 'btn btn-warning btn-block' : 'btn btn-dark btn-block'
              }
              type="submit"
            >
              {
                modoEdicion ? 'Editar' : 'Agregar'
              }
            </button>
            
          </form>

1 respuesta 1

1

pasa por que cataegaria es un array antes de que elijas alguno de los valores del select, el valor de por defecto de categoria se pone de esta manera

const [categoria,setCategoria] = useState("valor por defecto aqui")

si es que importaste useState de react pero si no

const [categoria,setCategoria] = React.useState("valor por defecto aqui")

otra manera agregando el valor por defecto desde el mismo array

const [categoria,setCategoria] =  useState(categorias[0].nombre)

tambien esta el defaultValue del elemeto select por si no funciona

2
  • un like no estaría de más Commented el 17 jun. 2022 a las 15:56
  • tu solucion (la ultima en concreto) me lanza este error en la consola: Uncaught TypeError: Cannot read property 'nombre' of undefined. Y para utilizar defaultValue para el select he visto que es necesario un label y un value, y yo en mi select solo tengo los nombres de las categorias Commented el 17 jun. 2022 a las 20:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.