En mi aplicación React, solicito datos de una API y los almaceno en el estado:
const [entities, setEntities] = useState([]); en mi gancho useEffect obtengo los datos de la API; básicamente, tengo la siguiente matriz de ejemplo como mis entidades:
["@Organization", "@City", "@Immobilie", "@Currency", "@Test"] Ahora quiero mostrar todas las entidades en una tabla y tener un botón de radio en cada fila para seleccionar UNA entidad.
estoy usando React-Bootstrap para construir la tabla
<Table striped bordered style={{ color: "#4d4d4d" }}> <thead> <tr> <th>Entities</th> </tr> </thead> <tbody> {entities.map(entity => <tr key={entity} style={{ color: "#4d4d4d" }}> <td> <Row> <Col> <Form.Check type="radio" label={entity}/> </Col> </Row> </td> </tr>)} </tbody> </Table> En <tbody> mapeo cada entrada de la matriz de entities a un elemento de tabla. Pero ahora puedo hacer clic en el botón de radio en cada tablero, sin anular la selección de los demás.
Traté de envolver un elemento <Form> alrededor de la tabla, pero nada cambia.
Si envuelvo el <Form> alrededor del <tbody> el <tbody> no se llena con tablerows.
Cuando coloco el <Form> dentro del elemento <Table> , la tabla completa ya no se muestra.
¿Cómo puedo agrupar los botones de opción para que solo se pueda seleccionar uno en esta tabla de creación dinámica?