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

345
Vistas
React-Bootstrap Table with dynamic Content - Form over Radio Buttons in Rows not working

In my React App I request data from an API and store it in state:

const [entities, setEntities] = useState([]);

in my useEffect hook I get the Data from the API - basicly I have the following example array as my entities:

 ["@Organization", "@City", "@Immobilie", "@Currency", "@Test"]

Now I want to display all entities in a table and have a radio button in each row to select ONE entity.
I'm using React-Bootstrap to build the Table

<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>

In the <tbody> I map every entry of the entities array to a Table Element. But Now I can click the Radio Button in each tablerow, without deselecting the others.
I tried to wrap a <Form> element around the Table, but nothing changes.
If I wrap the <Form> around the <tbody> the <tbody> doesnt get populated with tablerows.
When I put the <Form> inside the <Table> element the whole table doesn't render anymore.

How can I group the radio Buttons so only one is selectable in this dynamicly build table?

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

0

Thanks to The KNVBs comment I added a name attribute to my Form.Check element

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

Now only one tablerow-radio Button is selectable

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