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!

for(){} is JS code. To embed JS code in JSX, you must put it inside two curly braces such as: {for (){}} — Antoine Weber
– Antoine Weber, Commented Apr 4, 2022 at 13:51
Thanks, but I get the same error (Unexpected token), this time on the for. Updated the question description with this. — reddfox
– reddfox, Commented Apr 4, 2022 at 13:57
@AntoineWeber Just adding {} around the for loop wont work as the final content must be JSX. — Christopher Townsend
– Christopher Townsend, Commented Apr 4, 2022 at 13:59
This question is similar to: Loop inside React JSX. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — agilgur5
– agilgur5, Commented Jul 18 at 12:21

Antoine Weber · Accepted Answer · 2022-04-04 14:21:04Z

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.

edited Apr 4, 2022 at 14:21

answered Apr 4, 2022 at 14:04

Antoine Weber

1,9641 gold badge18 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christopher Townsend · Accepted Answer · 2022-04-04 14:03:46Z

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

edited Apr 4, 2022 at 14:03

answered Apr 4, 2022 at 13:56

Christopher Townsend

1,7932 gold badges17 silver badges44 bronze badges

3 Comments

reddfox Over a year ago

Thanks. I am trying to understand why can't I use a regular for loop even with curly brackets?

Christopher Townsend Over a year ago

@reddfox The curly brackets don't denote that you can write any javascript, but instead that you can use javascript functions to create JSX.

Antoine Weber Over a year ago

I think you forgot fill() in Array(5).fill().map

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related