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