Si tengo variable como tal:
const [APIKey, setAPIKey] = useState([])¿Puedo agruparlos en 1 variable y pasarlo como accesorio?
const passAPI = {APIKey, setAPIKey}Así es como estoy tratando de pasarlo:
const Home = () => { const [APIKey, setAPIKey] = useState([]) const [Symbols, setSymbols] = useState([]) const [Endpoint, setEndpoint] = useState([]) const [Base, setBase] = useState([]) const passAPI = {APIKey, setAPIKey} const passSymbols = {Symbols, setSymbols} const passEndpoint = {Endpoint, setEndpoint} const passBase = {Base, setBase} return ( <Grid container spacing='8' className='HomeWrapper'> <Grid item sx={{ display: { xs: 'none', sm: 'flex' }, width: '50%' }} className='x1'> <Paper elevation='6' className='HomePaper' sx={{ width: '100%'}}> <TopLeft passAPI={passAPI} passSymbols={passSymbols} passEndpoint={passEndpoint} passBase={passBase}/> </Paper> </Grid> ...Y aquí hay un ejemplo de cómo estaba tratando de usarlo:
const TopRight = ({passAPI, passSymbols, passEndpoint, passCurrency}) => { return ( <Box className='TopRightWrapper' sx={{ display: 'flex', flexDirection: 'column' }} pl={2} pt={1} pb={1}> <FormControl onSubmit={passAPI}> <Box> <InputLabel htmlFor="my-input">API Key</InputLabel> <Input id="my-input" aria-describedby="my-helper-text" /> <button type='submit'>click</button> </Box> </FormControl>Me gustaría usar la función setAPIKey que se encuentra en la variable passAPI. ¿Cómo hago esto?
Como puedo ver, passAPI en su caso es un objeto. Entonces, para obtener setState de passAPI, debe usar "passAPI.setAPIKey" en onSubmit. Así que debería ser así:
<FormControl onSubmit={passAPI.setAPIKey}> <Box> <InputLabel htmlFor="my-input">API Key</InputLabel> <Input id="my-input" aria-describedby="my-helper-text" /> <button type='submit'>click</button> </Box> </FormControl>Además, la API FormControl no tiene el evento onSubmit, debe usar la etiqueta "formulario" en su lugar. A través del argumento del evento onSumbit del formulario, podrá acceder a la propiedad "objetivo" que tendría elementos de formulario dentro, y luego accederá al valor de ese elemento de entrada. Algo como eso
<form onSubmit={(e) => { e.preventDefault(); console.log("e", e.target[0].value); passAPI.setAPIKey(e.target[0].value) }} >Avísame si te ayuda.