Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

352
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!