0

mi problema es, cuando quiero iterar un objeto en un componente de React, se iteran el componente princiapal

Asi se ve introducir la descripción de la imagen aquí

Este es el codigo cuando llamo el componente para agregarle los props

render(){
  return (
    <div className="app container">
      {this.state.opciones.map((opcion, key) =>  
        <Preguntas
         item={opcion} key={key}
        />
      )}
      </div>
  );

  }

Este es el codigo del componente Preguntas

 render(){
        return(
            <div className="contenido">
            <div className="config-logo">
                <img src={LogoBoxi} />
            </div>
            <div className="cuestionario">       
                <input type="button" name={this.props.item.id} value={this.props.item.opcion} onClick={this.handleChange}/>
            </div>
            <div className="BotonesSeleccion">        
                <input type="button" value="Volver" />
                <input type="button" value="Siguiente" />
            </div>
        </div>

           );
        } 
1
  • Según lo que muestras el resultado està bien. Con el map(), lo que haces es que por cada objeto del arreglo, devuelves un componente tipo Preguntas y esta bien. No entiendo que dices que está mal. Commented el 21 feb. 2020 a las 3:39

1 respuesta 1

1

Se muestra varias veces tu logo y los botones de abajo porque tienes esos tags dentro del map y se están duplicando, lo que puedes hacer extraer eso y ponerlo dentro de tu componente padre y entre tú logo y los botones de abajo iterar el componente Preguntas

render(){
  return (
    <div className="app container">
      <div className="config-logo">
                <img src={LogoBoxi} />
            </div>
      {this.state.opciones.map((opcion, key) =>  
        <Preguntas
         item={opcion} key={key}
        />
      )}
     <div className="BotonesSeleccion">        
                <input type="button" value="Volver" />
                <input type="button" value="Siguiente" />
            </div> 
      </div>
  );

  }


render(){
        return(
            <div className="contenido">
            <div className="cuestionario">       
                <input type="button" name={this.props.item.id} value={this.props.item.opcion} onClick={this.handleChange}/>
            </div>
        </div>

           );
        } 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.