CODEWITHSUNDEEP
javascriptreactjsjsx
reddfox
reddfox

Reputation: 397

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

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.

enter image description here

enter image description here

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!

Upvotes: 0

Views: 956

Answers (2)

Antoine Weber
Antoine Weber

Reputation: 1904

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.

Upvotes: 2

Christopher Townsend
Christopher Townsend

Reputation: 1745

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

Upvotes: 1

Related Questions