0
176
Vistas¿Cómo puedo representar múltiples entradas de texto con un bucle for?
Estoy tratando de mostrar 5 campos de entrada en la pantalla dentro de un bucle for. También quiero aplicar una clase dinámica a cada uno de ellos más adelante (según su estado). Aquí está mi código:
function App() { ... return ( <Grid container className={classes.root}> <CssBaseline /> <Grid item xs={false} md={7} className={classes.image} /> <Grid item xs={12} md={5} component={Paper} elevation={6} square> <div className={classes.paper}> <form className={classes.form} onSubmit={handleSubmit}> {inputFields} for (let i = 0; i < 5; i++) { <TextField /> } {for (let i = 0; i < 5; i++) { <TextField /> }} <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit} > Submit </Button> </form> </div> </Grid> </Grid> ); }Aquí está el error que recibo: SyntaxError: Unexpected token .
Todavía estoy aprendiendo React, así que estoy bastante seguro de que lo estoy haciendo mal. ¿Cómo se representan varios elementos con un bucle for? ¿Hay una mejor manera?
¡Gracias!
2 Respuestas
Responde la pregunta0
No puede poner el código javascript en la declaración JSX. Debe usar {} para indicar cualquier código javascript que se use para generar JSX.
Usar algo como esto en lugar de su bucle for funcionaría siempre que lo ponga entre llaves.
new Array(5).fill().map(() => <TextField/>)Resultado final :
function App() { ... return ( <Grid container className={classes.root}> <CssBaseline /> <Grid item xs={false} md={7} className={classes.image} /> <Grid item xs={12} md={5} component={Paper} elevation={6} square> <div className={classes.paper}> <form className={classes.form} onSubmit={handleSubmit}> {new Array(5).fill().map(() => <TextField/>)} <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit} > Submit </Button> </form> </div> </Grid> </Grid> ); }0
Debemos incrustar algún código JS que devuelva algo de JSX o una matriz de JSX.
{new Array(5).fill().map((_) => ( <TextField/> ))} Este código crea una matriz de 5 elementos undefined . Luego, .map devuelve una matriz con cada elemento undefined transformado en <TextField/> .
Por lo tanto, devolvemos una matriz de JSX.
Creo que la razón principal por la que no funciona es que el bucle for no devuelve JSX.