Estoy tratando de mapear una matriz de objetos en un formulario basado en la entrada del usuario,

Aquí está la matriz de objetos:

 const arrObj= [ {item_name: 'test name 1', item_id: 'testname1'} ]

Luego, un usuario ingresará un número en un campo numérico en el formulario, cuando lo haga, mi función onChange toma la entrada como un parámetro y agrega otro índice a la matriz y aumenta el número entero almacenado en la cadena (el 1 en nombre de prueba, por lo que la siguiente entrada debe ser nombre de prueba 2)

Aquí está la función de cambio

 const addItems= (numOfItems) =>{ for(let i=0; i<numOfItems; i++){ arrObj.push({item_name:`test name ${i+2}`, item_id:`testname${i+2}`}) } //Console logging does show that function works as intended console.log(arrObj) }

Ahora, para el gran final, estoy tratando de asignar cada elemento a una casilla de verificación de selección múltiple:

 <FormGroup> {arrObj.map((item, index) => ( <FormControlLabel key={index} control={ <Checkbox name={item.item_name} id={item.item_id} color="primary" classes={{ root: classes.checkbox, checked: classes.checked, }} /> } label={item.item_name} //These checked and onChange is for holding the checked state checked={valTestItemName[index].length > 0 ? valTestItemName[index].includes(item.item_name) : false} onChange={evt => handleTestItemName(evt, index)} /> ))} </FormGroup>

Lo único que aparece es una casilla de verificación en blanco. Pero, al iniciar sesión en arrObj, veo que se completa según lo previsto. Gracias por la ayuda.

Aquí está mi salida de console.log si ayuda:

 0: {item_name: 'test name 1', item_id: 'testname1'} 1: {item_name: 'test name 2', item_id: 'testname2'} 2: {item_name: 'test name 3', item_id: 'testname3'} length: 3