How can I render multiple text inputs with a for loop?

Question

I am trying to display 5 input fields on the screen within a for loop. I also want to apply a dynamic class to each of them later (according to their state). Here is my code:

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>
    );
}

Here is the error I am getting: SyntaxError: Unexpected token.

I am still learning React, so I am pretty sure I am doing it wrong. How does one render multiple elements with a for loop? Is there a better way?

Thanks!

Answer 1

You cannot put javascript code in JSX declaration. You must use {} to denote any javascript code that is used to generate JSX.

Using something like this instead of your for loop would work as long as you put it in curly brackets.

 new Array(5).fill().map(() => <TextField/>)

Final result :

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>
    );
}

Answer 2

We must embed some JS code that returns some JSX or an array of JSX.

{new Array(5).fill().map((_) => (
      <TextField/>
      ))}

This code creates an array of 5 undefined elements. Then, .map returns an array with each undefined element transformed to <TextField/>.

Hence we return an array of JSX.

I believe the main reason it does not work is that the for loop does not return JSX.