Soy nuevo en React y estoy tratando de llamar a una función que actúa como un componente, pero devuelve dos valores, uno llamado 'renderizar' que solo devuelve un componente envuelto en un div, y otro llamado sliderVal, que es un valor de estado interno de ese deslizador. A continuación se muestra el código de MySlider.js

 function MySlider(props) { const [sliderVal, setSliderVal] = useState(1); return{ render:( <div> <Grid container justify = "center"> <Box sx={{ width: 250 }}> <Typography id="input-slider" gutterBottom> {props} </Typography> <Slider defaultValue={1} valueLabelDisplay="auto" step={1} value={sliderVal} marks min={1} max={10} onChange={(_, newValue) => setSliderVal(newValue)} /> </Box> </Grid> </div> ), sliderVal }

En mi App.js, estoy usando el siguiente código para representar dos controles deslizantes y pasar sus valores a otro componente.

 var {render, sliderVal} = MySlider("Number of Paragraphs"); var {render1, sliderVal1} = MySlider("Number of Words");

El primero funciona bien, puedo usar {render} para representar el control deslizante y {sliderVal} para acceder a su valor y pasar a otro componente. Sin embargo, el segundo no funciona y no se procesa nada. Cuando hago console.log render1 y sliderVal1, ambos no están definidos. ¡Cualquier idea es muy apreciada!