estoy teniendo un problema con react y material ui donde estoy intentando generar varios textfield con un for segun el valor numerico en otro textfield, no habia tenido problema con esto con js vanilla, doy un ejemplo en vanilla hacia esto
dt = $("#dt").val();
if (dt == 0 || dt == "" || dt == null || dt == undefined) {
dt = 1;
}
if (dt > 20) {
dt = 20;
}
inputDt = "";
inputBu = "";
inputPe = "";
for (let i = 0; i < dt; i++) {
inputDt += `<input type="text" class="form-control form-control-sm" placeholder="N° del
documento" required="" name="numDt[]" id="numDt">`;
inputBu += `<input type="number" min="1" class="form-control form-control-sm"
placeholder="Cantidad bultos" required="" name="numBul[]" id="numBul" value="1">`;
inputPe += `<input type='text' id='numPes' name="numPes[]" placeholder="kg"
autocomplete="off" class="form-control form-control-sm" required="" value="1"/>`;
}
$("#inputDt").html(inputDt);
$("#inputBu").html(inputBu);
$("#inputPe").html(inputPe);
al momento de enviar estos valores en el formulario con el nombre name='numBul[]' no generaba ningun problema, pero en react no me funciona ya que cuando agrego un valor en alguno de los generados todos se me cambian a ese o me sale "[object][object]"
este es el codigo react
Array.from({ length: formik.values.cantidadVehiculos }).map((_, index) => (
<Grid key={index} xs={12} item container spacing={1}>
<Grid item xs={3}>
<Autocomplete
disablePortal
size="small"
options={tipoVehiculo}
onChange={(e, value) => {
formik.setFieldValue('tipoVehiculo', value?.id || '');
}}
onOpen={formik.handleBlur}
includeInputInList
renderInput={(p) => (
<TextField
{...p}
id="tipoVehiculo"
name="tipoVehiculo"
label="tipoVehiculo"
error={formik.touched.tipoVehiculo && Boolean(formik.errors.tipoVehiculo)}
helperText={formik.touched.tipoVehiculo && formik.errors.tipoVehiculo}
/>
)}
/>
</Grid>
))}