He estado trabajando para simplificar mi código y tengo curiosidad por saber cómo me acercaría a pasar un valor secundario usando accesorios y obteniendo datos desde el back-end. Estoy usando Autocompletar de UI de material y la pila PERN. Todo funciona, excepto que quiero cambiar "region_name" para que sea un accesorio. Entonces puedo cambiar los valores dinámicamente dentro del evento detalles.js. cuando estoy obteniendo otros datos.

Actualmente tengo esta configuración de componentes.

Producción.js

 import Autocomplete from "@mui/material/Autocomplete"; import Box from "@mui/material/Box"; import Stack from "@mui/material/Stack"; import TextField from "@mui/material/TextField"; export default function CustomAutoComplete(props) { return ( <Stack sx={{ m: 1 }}> <Autocomplete sx={{ ml: 2, mr: 2 }} size="small" id="combo-box-demo" freeSolo inputValue={props.inputValue} onInputChange={(event, newValue) => { props.set(newValue); }} getOptionLabel={(data) => `${data.region_name}`} options={props.data} isOptionEqualToValue={(option, value) => option.region_name === value.region_name } renderOption={(props, data) => ( <Box component="li" {...props} key={data.id}> {data.region_name} </Box> )} renderInput={(params) => <TextField {...params} label="Region" />} /> </Stack> ); }

Luego, importándolo en un archivo separado EventDetails.js obteniendo los datos y almacenándolos en LocalStorage, que eventualmente pasaré a useState.

 import CustomAutoComplete from "../../atoms/AutoComplete"; import FormGroup from "@mui/material/FormGroup"; import { Fragment, useState, useEffect } from "react"; import { useLocalStorage } from "../../utils/LocalStorage.js"; const EventDetails = () => { const [region, setRegion] = useLocalStorage("region", ""); const [getRegion, setGetRegion] = useState([]); // fetching backend data useEffect(() => { fetch("/authentication/region") .then((response) => response.json()) .then((getRegion) => setGetRegion(getRegion)); }, []); return ( <Fragment> <FormGroup sx={{ p: 2, m: 1 }}> <CustomAutoComplete inputValue={region} set={setRegion} data={getRegion} key={getRegion.id} name={region_name} // <--feeble attempt label="Region" /> </FormGroup> </Fragment> ); };