Tengo este componente de selección con sus valores tomados de los datos de useEffect. En este componente, pude ver en la consola el valor que se seleccionó de la select
const SelectName = () => { const [value, setValue] = useState(0); const [names, setNames] = useState([]); const handleChange = (e) => setValue(e.target.value); useEffect(() => { const unsubscribe = firestore .collection("name") .onSnapshot((snapshot) => { const arr = []; snapshot.forEach((doc) => arr.push({ ...doc.data(), id: doc.id, }) ); setNames(arr); }); return () => { unsubscribe(); }; }, []); // console.log(value); return ( <div> <FormControl fullWidth> <InputLabel htmlFor="names">Names</InputLabel> <Select onChange={handleChange} fullWidth> {names && names.map((user) => ( <MenuItem key={user.firstName + " " + user.lastName} value={user.firstName + " " + user.lastName} // defaultValue={} > {user.firstName + " " + user.lastName} </MenuItem> ))} </Select> </FormControl> </div> ); }; export default SelectName; Y tengo este otro componente con otros campos, y quería agregar el componente de selección aquí. Sin embargo, no puedo obtener el valor del componente seleccionado en este formulario. También usaría el componente de selección dos veces en este componente; primero con el 1er nombre seleccionado y el 2do nombre seleccionado. Y puede haber casos en los que el usuario pueda ingresar diferentes nombres de la primera y la segunda select .
Intenté poner value y onChange en el primer componente select , pero no puedo ver el valor seleccionado en la consola. ¿Cómo podría obtener los valores de select? Gracias.
const [value, setValue] = useState(""); const handleChange = (e) => setValue(e.target.value); console.log(value); <form onSubmit={handleSubmit}> //other fields <Grid item> //1st selected Name <SelectName value={value} onChange={handleChange} /> </Grid> <Grid item> //2nd selected Name <SelectName/> </Grid> <ButtonForm type="submit" fullWidth> Submit </ButtonForm> </Grid> </Grid> </form>Debe desestructurar el value pasado y los accesorios onChange y usarlos en lugar del estado del componente de value local.
const SelectName = ({ value, onChange }) => { const [names, setNames] = useState([]); useEffect(() => { const unsubscribe = firestore .collection("name") .onSnapshot((snapshot) => { const arr = []; snapshot.forEach((doc) => arr.push({ ...doc.data(), id: doc.id, }) ); setNames(arr); }); return () => { unsubscribe(); }; }, []); return ( <div> <FormControl fullWidth> <InputLabel htmlFor="names">Names</InputLabel> <Select value={value} // <-- pass value onChange={onChange} // <-- pass change handler fullWidth > {names && names.map((user) => ( <MenuItem key={user.firstName + " " + user.lastName} value={user.firstName + " " + user.lastName} > {user.firstName + " " + user.lastName} </MenuItem> ))} </Select> </FormControl> </div> ); };Como optimización, y para generalizar aún más, es posible que también desee factorizar la lógica del almacén de incendios, en el padre y pasar las opciones como accesorio.