Tengo una matriz de nombres de columnas y estoy tratando de crear dinámicamente una tabla con 2 columnas (nombre y tipo). "Nombre" será el nombre de la columna y "tipo" será un botón desplegable para seleccionar un tipo (que se implementará más adelante, solo quiero imprimir un botón por ahora).

Este es el código que tengo hasta ahora, no funciona en absoluto y aparece "Error de análisis: los elementos JSX adyacentes deben estar envueltos en una etiqueta adjunta".

Cols ejemplo, lo estoy cargando con el siguiente código:

 const [cols, setCols] = useState(null); d3.csv('/test.csv').then(data -> setCols(data.columns)); console.log(cols); ["name", "address", "zip", "number", ...]

 <ReactBootstrap.Table striped bordered hover> <thead> <tr> <th>Column</th> <th>Import As</th> </tr> </thead> <tbody> { cols.map((col) => ( <td><p>{col}</p></td> <td><div><button>Skipped</button></div></td> )) } </tbody>

Lo arreglé, cambia a continuación:

 const [cols, setCols] = useState([]); cols.map((col) => ( <Fragment> <tr> <td><p>{col}</p></td> <td><div><button>Skipped</button></div></td> </tr> </Fragment> ))