1

Código de del componente Card

import React from 'react';

export default class Card extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <div className="card-Games">
                <div>
                    <img src={this.props.imagen01} />
                    <h4>{this.props.name01}</h4>
                    {/*<a href="#">Agregar</a>*/}
                </div>

                <img src="" alt=""/>
                <div>
                    <img src={this.props.imagen02}  />
                    <h4>{this.props.name02}</h4>
                    {/*<a href="#">Agregar</a>*/}
                </div>


            {/*     Las imágenes son de prueba*/}
            </div>

        );
    }
}

Como pueden ver en este código, meto cada imagen que quiero agregar al homepage cierto, pero lo que quiero es pasarle mis propias imágenes que tengo agregadas a mi Proyecto, estoy intentando importando la imagen que quiero mostrar en la etiqueta div Pero no se me esta mostrando, me serviría mucho si me pueden ayudar a ver el error, o buscar una solución posible de esta, muchas gracias de antemano

Código contenedor para todas las imágenes que se agreguen

import Card from './cards/card';
import Callofduty from '../images/playstation/callofdutyMW.jpg'

export default class Content extends Component {
    constructor(props) {
        super(props); {
            this.state = {

                card1: {
                    img: 'https://vignette.wikia.nocookie.net/fifa/images/a/aa/FIFA_20_Regular_Edition.jpg/revision/latest/scale-to-width-down/310?cb=20191002111706&path-prefix=es ' ,
                    name: 'FIFA 20',
                    subname: 'Lanzado 2019',
                },
                card2: {
                    img: {Callofduty},
                    name: 'FIFA 21',
                    subname: 'Lanzado 2020',
                }
            
            }
        }
    }
    render() {
        return (
            <div className="Home-content">
                {/* Probando las props para los contenidos individuales*/}
                <Card imagen01={this.state.card1.img}
                      name01={this.state.card1.name}
                />

                <Card imagen02={this.state.card2.img}
                      name02={this.state.card2.name}
                />

            </div>
        );
    }

} ```


1 respuesta 1

2

Solución.

Tu razonamiento para pasar las props es correcto en cierta forma. Tu error se debe a los tipos que le estás pasando a tu componente y que te faltan props.

card2: {
                    img: {Callofduty},
                    name: 'FIFA 21',
                    subname: 'Lanzado 2020',
                }

img en card2 es un objeto, pero en tu componente card, el src del img necesita una url.

card2: {
                        img: Callofduty,
                        name: 'FIFA 21',
                        subname: 'Lanzado 2020',
                    }

Bastaría con quitarle las llaves. Dado que la importación Callofduty ya hace referencia a un path.

Además, Card espera dos imágenes y en cada declaración sólo pasas una de las dos, pero nota que para hacer el render el componente depende de dos. La forma actual de que tu componente reciba lo que necesita sería algo como:

<Card imagen01={...} name01={...} imagen02={...} name02={...}/>

Lo que se sería como decir que cada Card tiene dos imágenes. Lo cual no es incorrecto, sólo extraño. En dado caso el componente debería llamarse <Cards/> en plural. (Esto sólo es para no confundir al desarrollador o desarrolladora y mantener ciertas convenciones).

Mi recomendación: Una mejor estructura acorde a la filosofía de React.

Actualmente tu componente Card está fuertemente asociado con únicamente dos imágenes por 'Card' y tiene un contentedor 'card-Games'. Esto hace que tengas que declarar cada imagen que quieras tener en tu card, lo cual te llevaría mucho trabajo. Vamos a centrarnos en que un Card sólo puede tener el contenido de una imagen para usarlo así:

<Card content={algunCardContentCompatible}/>

Tu componente Card quedaría:

import React from 'react';
import PropTypes from 'prop-types';

export default class Card extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
                <div className="Card-styles">
                    <img src={this.props.content.img}/>
                    <h4>{this.props.content.name}</h4>
                </div>

        );
    }
}

Card.propTypes = {
  content: PropTypes.shape({
      img: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      subname: PropType.string
    })
  };

Para asegurarme de que estoy pasando los props correctos, estoy usando PropTypes. (Docs aquí). Con esto sólo defino que mi componente Card, debe recibir como props un objecto content de la forma {img: string, name: string, subname: string}. De tal forma tener this.props.content.img, this.props.content.namey this.props.content.subname. Si algo sale mal, se desplegará un error en la consola del browser.

Finalmente, tu componente Content.

import React from 'react';
import Card from './cards/card';
import Callofduty from '../images/playstation/callofdutyMW.jpg'

export default class Content extends React.Component {
    constructor(props) {
        super(props); 
        this.state = {
                cards: [{
                    img: 'https://vignette.wikia.nocookie.net/fifa/images/a/aa/FIFA_20_Regular_Edition.jpg/revision/latest/scale-to-width-down/310?cb=20191002111706&path-prefix=es',
                    name: 'FIFA 20',
                    subname: 'Lanzado 2019',
                }, {
                    img: Callofduty,
                    name: 'Call of Duty: Warzone',
                    subname: 'Lanzado 2020',
                }]
            }
    }
    

    const { cards } = this.state;


    render() {
        return (
            <div className="Home-content cards-container">
                {
                  cards.map((cardContent) => (<Card content={cardContent}/>))     
                }
            </div>
        );
    }

}

Al final, sólo estoy agarrando los valores del array cards del state, de tal forma que obtengo algo como [card1, card2, ..., cardN]. Este array lo mapeo y cada valor del array lo paso como props a un componente Card. De esta forma, si agregas un nuevo objeto card ({img, name, subname}) al array this.state.cards, igual se añadirá sin tener que declarar estaticamente su valor en otro sitio. Con esto te evitas declarar de manera estatica cada imagen que debe de contener tu Card y sólo te centras en qué debería tener exclusivamente una.

Espero haber sido de ayuda.

1
  • Hola, de verdad muchísimas gracias por tomarte el tiempo de explicármelo de esta forma, me ha quedado mucho mas claro, y mucho mas fácil como mencionas para poder agregar las imágenes a cada etiqueta div, Gracias de antemano.
    – AllisLove
    Commented el 30 jul. 2020 a las 13:56

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.