Tengo un componente SortSelect (hijo) que quiero poner en mi componente Inicio (principal).
export default function SortSelect() { const classes = useStyles(); const [sortType, setSortType] = useState('asc'); const handleChange = (event) => { setSortType(event.target.value); }; return ( <FormControl className={classes.formControl}> <Select value={sortType} onChange={handleChange} displayEmpty className={classes.selectEmpty} inputProps={{ 'aria-label': 'Without label' }} > <MenuItem value='asc'>Count asc</MenuItem> <MenuItem value='desc'>Count desc</MenuItem> <MenuItem value='a-z'>Name AZ</MenuItem> <MenuItem value='z-a'>Name ZA</MenuItem> </Select> <FormHelperText>Sort by</FormHelperText> </FormControl> ); }Necesito obtener el estado sortType de SortSelect , para poder ordenar mi matriz. ¿Cómo puedo hacer esto?
Eso realmente no suena como un patrón que debas implementar con React. Si el componente principal necesita ese estado, entonces debería manejarlo y pasar el estado como accesorio a SortSelect .
Si necesita el sortType solo momentáneamente en lugar de tenerlo en su estado, simplemente puede pasar una devolución de llamada desde Home a SortSelect que se llama en la función SortSelect de handleChange .
Solo como una nota, es posible exponer el estado a un componente principal usando el enlace useImperativeHandle de React, pero realmente no debería usar eso a menos que esté 100% seguro de lo que está haciendo.