Textfields inside the .map are not lined side by side-CodePudding

So the text fields of name and quantity are not side by side or not in one row after I added the .map. Initially, these two text fields would show in one row, after the .map, it would not be in one row anymore.

<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
 {colorList.map((singleColor, index) => (
        <div key={index}>
          <Grid item xs={6}>
            <TextField
              label="name"
              name="name"
              type="text"
              id="name"
              required
              
            />
          </Grid>

          <br />

          <Grid item xs={6}>
            <TextField
              label="qty"
              name="qty"
              type="text"
            />
          </Grid>
        </div>
      ))}
  
</Grid>

CodePudding user response：

This might work:

       <div className="row" key={index}>
          <Grid className="gridRow" item xs={6}>
            <TextField
              label="name"
              name="name"
              type="text"
              id="name"
              required
            />
          </Grid>

          <br />

          <Grid className="gridRow" item xs={6}>
            <TextField
              label="qty"
              name="qty"
              type="text"
            />
          </Grid>
        </div>

and your css classes should be like this:

.row {
   display: flex;
}

.gridRow {
   display: inline-block;
}