Estoy creando una aplicación de boletas y quiero generar dinámicamente un grupo de radio basado en una lista de candidatos en un objeto. El objeto se ve así.
{ "districtAttorney": [{ "name": "Candidate1", "politics": "Dem-District 21", "img": "./Candidates/uncleruckus.jpg" }, { "name": "Candidate2", "politics": "Dem-District 21", "img": "./Candidates/uncleruckus.jpg" } ] }Quiero generar un grupo de radio que se vea así
<div onChange={this.onChangeValue}> <input type="radio" value="Candidate1" name="gender" /> Male <input type="radio" value="Candidate2" name="gender" /> Female <input type="radio" value="Candidate3" name="gender" /> Other </div>¿Cómo haría esto? Gracias por adelantado.
Sugeriría algo como esto:
const obj = result.obj //or whatever your object name is return ( <div onChange={this.onChangeValue}> {obj.districtAttorney.map((cand, ind) => ( <label> <input type="radio" value={cand.name} name="gender" /> <span>{cand.name}</span> </lable> } </div>Dentro de la función de mapa, puede usar todos los datos del objeto json