Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

350
Vistas
Tabla React-Bootstrap con contenido dinámico: el formulario sobre botones de radio en filas no funciona

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?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Gracias al comentario de KNVB , agregué un atributo de nombre a mi elemento Form.Check

 <Form.Check type="radio" name="entitySelection" label={entity} />

Ahora solo se puede seleccionar un botón de radio de tablerow

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda