Creé una matriz en el objeto de estado inicial y estoy tratando de agregar elementos a la matriz cada vez que se marca una casilla de verificación y eliminar el elemento cada vez que no está marcada.

La función que estoy usando es bastante simple y no veo ninguna razón por la que no debería funcionar. Estoy usando setState para distribuir los elementos en la matriz y agregar el nuevo elemento al final, pero sigo recibiendo un TypeError en el navegador que dice que la matriz no es iterable. Intenté usar typeof para ver si es una matriz y da como resultado undefined .

Haga clic aquí para ver el error que recibo

mi código es:

 class Step3 extends React.Component { constructor() { super() this.state = { missingList: [], } } handleChangeArray = e => { this.setState({ missingList: [...this.state.missingList, e.target.name] }) console.log(this.state.missingList) } render() { const { currentProductType, ProductSubtype } = this.props return ( <div className="row mt-4"> <h4 className='subtitle'>Missing List</h4> { systemData[`${currentProductType}`][`${ProductSubtype}`].parts.map((item, _id) => <CustomCheckbox col={3} key={_id} name={item} text={item} onChange={this.handleChangeArray} /> ) } </div> ) } }

systemData apunta a un objeto anidado de donde proviene la lista y usa el método de map para representar la casilla de verificación