Estoy tratando de manejar varias casillas de verificación de la siguiente manera:

 sendFileNameToBackEnd = (filename: string[]) => { console.log(filename) this.vizsualizaForFileName(filename) } render() { const handleChange = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => { let listoffilename : Array<string> = [] const target = event.currentTarget; const name = target.name; if(checked && name !== '') { listoffilename.push(name) this.setState({ listoffilename1: listoffilename }); } console.log(this.state.listoffilename1) }; return ( <DataList aria-label="Checkbox and action data list example" isCompact > { this.state.fileListData ? this.state.fileListData.map((fd) => <DataListItem aria-labelledby="check-action-item1"> <DataListItemRow> <DataListCheck id="controlled-check" aria-labelledby="check-action-item" isChecked={isChecked1} onChange={handleChange} name={fd}/> <DataListItemCells dataListCells={[ <DataListCell key="primary content"> <span id="check-action-item1">{fd ? fd : "Loading..."}</span> </DataListCell> ]} /> </DataListItemRow> </DataListItem> ): <> <EmptyState> <Title headingLevel="h4" size="lg">Empty state</Title> </EmptyState> </> } </DataList> <Button variant="primary" onClick={ () => {this.sendFileNameToBackEnd(this.state.listoffilename1)}}>Visualize</Button> ); }

En el código anterior, cuando selecciono cualquier casilla de verificación, puedo obtener su valor, pero cuando elijo varias casillas de verificación, solo obtengo un valor en una matriz.

En 'this.state.fileListData' tengo n cantidad de datos y estoy mostrando una casilla de verificación usando un mapa y un botón llamado 'Visualizar' . Cuando seleccionamos algunos de los valores de la casilla de verificación y hacemos clic en el botón 'Visualizar' , quiero enviar todos los valores seleccionados al backend para otra operación.

Cuando selecciono varias casillas de verificación, solo envía un valor, no todos los valores seleccionados.

Guíame si estoy haciendo algo mal.