0

Buenas tardes, tengo un componente en react y necesito que con un json que trae el nombre y el enlace para la imagen pueda mostrar eso en mi div.

import React from 'react';

class Content extends React.Component {
  render() {
     return ( 
 
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div className="hovereffect">
        <img className="img-responsive" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/how-to-setup-website.jpg" alt="Name" />
            <div className="overlay">
                <h2>Jam3 Web Site</h2>
                <p> 
					<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec blandit nibh. Suspendisse potenti. Nulla vitae eleifend leo, sed gravida nulla.</b>
				</p> 
				<p> 
					<a href="#">VIEW DEMO</a>
				</p> 
            </div>
    </div>
</div>


     );
  }
}

export default Content;

Cual seria la forma adecuada de hacer un repeat aqui?

1
  • ¿Obtienes el json por ajax o de forma local?
    – gugadev
    el 11 ene. 2017 a las 3:34

1 respuesta 1

1

Primero que nada los datos deben residir en el state o en el properties del componente independientemente de si los recibes de un servicio REST o si son datos generados por la propia aplicación front-end, en caso de recibirlos de un servicio entonces debes actualizar el state del componente con los datos que recibes de la llamada ajax.

Luego puedes mostrar los ítems de la siguiente manera. (solo puse el código relevante)

import React from 'react';

class Content extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [{nombre: 'Nombre1', enlace: 'www.ejemplo.com/img1.jpg'}, {nombre: 'Nombre2', enlace: 'www.ejemplo.com/img2.jpg'}]
        }
    }

    render() {
        let itemsView = [];

        this.state.items.forEach(function(item){
            itemsView.push(
                <li>
                    <h1>{item.nombre}</h1>
                    <img src={item.enlace}/>
                </li>
            )
        });

        return (
            <div>
                <ul>
                    {itemsView}
                </ul>
            </div>
        );
    }
}

export default Content;

Para recibir los datos desde un servicio REST, lee mi respuesta a esta pregunta, es algo diferente pero en la respuesta esta lo que buscas

https://es.stackoverflow.com/a/41292/25849

3
  • Carlos, tu codigo devuelve errores en el bundle el 11 ene. 2017 a las 15:48
  • Y si los recivo desde un servicio REST pero ta eso lo hago yo mas adelante, ahora queria primero hacer que funcione con un json generado a mano como para testear y luego hacer que se conecte con la REST el 11 ene. 2017 a las 15:49
  • @SantiagoD'Antuoni habia un error en el forEach, no estaba haciendo referencia a la propiedad items del state, pruebalo ahora, si los recibes de un servicio REST lo que debes hacer es mutar el state cambiando la propiedad items por los datos que recibes del servicio el 11 ene. 2017 a las 16:08

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.