0

estoy aprendiendo React y estoy haciendo la sgte app , necesito mostrar la información del celular del cual se esta clickeando. Al hacer click en la imagen de un celular me genera una ventana modal, bien ahora la informacion la uso del sgte json, Entonces deseo hacer que dependiendo de la imagen clickeado me muestre esa informacion.

Ejm: el celular Samsung Galaxy A20 en el json esta la posicion 0 y el Zte Blade A5 en la 2, dependiendo de su posicion me debe mostrar su informacion, espero pueda entender lo que intento hacer. A continuación el componente donde renderizo la ventana modal:

import React, {Component, Fragment} from 'react';
import Icon from '../assets/Icon';
import './css/information-products.css';
import celulares from '../../json/celulares';

class InformationProduct extends Component{
  render(){
    return(
      <Fragment>
        <Icon iconName="fas fa-window-close" id="close-modal" onClick={() => this.props.showModal(false)} />
        <div className="wrap">
          <div className="information-product">
            <figure>
              <img loading="lazy" src={`${process.env.PUBLIC_URL}/${celulares[this.props.i].imagen}`} alt={'mayita'} title={'mayita'} />
            </figure>
            <h3>Modelo:<span>&nbsp;&nbsp;{celulares[this.props.i].modelo}</span></h3>
            <h3>Marca:<span>&nbsp;&nbsp;{celulares[this.props.i].marca}</span></h3>
            <h3>Memoria RAM:<span>&nbsp;&nbsp;{celulares[this.props.i].ram}</span></h3>
            <h3>Batería:&nbsp;&nbsp;<span>{celulares[this.props.i].bateria}</span>&nbsp;<span>mAh</span></h3>
            <h3>Camara Frontal:&nbsp;&nbsp;<span>{celulares[this.props.i].camara}</span>&nbsp;<span>MP</span></h3>
            <h3>Resolución:<span>&nbsp;&nbsp;{celulares[this.props.i].resolucion}</span></h3>
            <h3>Precio:&nbsp;&nbsp;<span>$/.</span>&nbsp;<span>{celulares[this.props.i].precio}</span></h3>
          </div>
        </div>
      </Fragment>
    )
  }
}

export default InformationProduct;

Ahora en el componente que renderiza al anterior, en este genero un estado de un numero -1 que cada vez que se hace click en la imagen aumenta en 1:

import React, { Component, Fragment } from 'react';
import InformationProduct from './InformationProduct';

class App extends Component{

  state = {
    position: -1,
  }

  /* */
  increase = () =>{
    this.setState({
      position: this.state.position + 1
    })
  }

  render(){
    return(
        {this.state.showModal === true ? <InformationProduct i={this.state.position} /> : null}
    )
  }
}

export default App;

No he puesto el componente completo, pues deseo que sea más facil de leer, practicamente en la propiedad i del componente <InformationProduct /> cambio el stado de position, pero creo que esto es una mala practica, ya que no me mostrara la informacion dependiendo de la imagen del producto clickeado.

Ya que cuando se haga click en cualquier imagen la propiedad i tomara el valor de 0, por lo que siempre mostrara Samsung Galaxy A20, por lo que debo mostrar la informacion dependiendo de la imagen clickeada, aqui pueden ver los componentes, Gracias!

4
  • Creo que estas abordando mal la situación. El componente modal ya lo tienes, por lo que sólo deberías enviar el index del elemento clickeado, no crear una variable posición, es innecesario.. puedes incluir la forma en que estás renderizando los celulares? Commented el 31 ene. 2021 a las 2:35
  • Paulo, pude resolver el problema hace unas horas, igual gracias por contestar !
    – Husdady
    Commented el 31 ene. 2021 a las 2:56
  • Excelente! No olvides incluir la solución que encontraste para futuras referencias. Saludos! Commented el 31 ene. 2021 a las 2:57
  • La solución esta en los componentes del github que menciono haya arriba, bueno ahora tengo que hacer la parte más 'dificil' de agregar productos al carrito, tal vez si no puedo resolverlo, formulare otra pregunta.
    – Husdady
    Commented el 31 ene. 2021 a las 3:05

1 respuesta 1

1

Puedes pasar funciones como propiedades a tus componentes, además de configurar algunas propiedades en el objeto state para controlar cuándo se muestra el modal de un celular y pasar su id.

Hay 3 componentes que necesitan configuración:

  • App
  • Product
  • InformationProduct

App

Se modifica el constructor, agregando las siguientes propiedades productIndex y infoVisible, también se registran con bind los métodos showModal y hideModal:

constructor(props){
    super(props);
    this.state = {
      allProducts: celulares,
      categoryCheckboxes: [...objects],
      productVisible: true,
      productIndex:0,
      infoVisible:false,
      activeFilter: []
    }
    this.onFilterChange = this.onFilterChange.bind(this);
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

Luego, showModal y hideModal se codifican como métodos de la clase App, los cuales se van a comunicar con los componentes Product e InformationProduct:

  showModal(productId){
    this.setState({
      infoVisible: true,
      productIndex:productId
    })
  }
    
  hideModal(){
     this.setState({
       infoVisible: false
    })
  }

Después, se codifica un ternary operator anidado, esto con la finalidad de mostrar Products o InformationProducts, nótese que los curly braces que usa la expresión del ternary anidado se omiten:

<section className="products">
            {(!this.state.infoVisible) ? 
              this.state.productVisible ? this.state.activeFilter.map( x =>{
              return (
                <Product key={x.id}
                imagen={x.imagen} modelo={x.modelo} stock={x.stock} precio={x.precio} showModal={this.showModal} id={x.id} />
                )
              })
              : <NotFound text="Ninguna casilla ha sido marcada..." />
            
            :<InformationProduct hideModal={this.hideModal} i={this.state.productIndex}/>}
</section>

Aquí mismo, se pasan nuevas props para el componente Product, el método showModal y id:

<Product ...props showModal={this.showModal} id={x.id} />

Nótese que en el código original (repo de github), se pasa el id en la prop key, pero aquí se pasa explícitamente como otra propiedad, ver separation of concerns.

Finalmente, para terminar la configuración del componente App, se pasan props para el componente InformationProduct, el método hideModal y productIndex:

<InformationProduct hideModal={this.hideModal} i={this.state.productIndex}/>

Product

Se recíbe el método showModal desde el componente App, para poder utilizarlo con un evento onClick, esto dentro del div que envuelve la estructura de cada elemento de la lista celulares; cuando el usuario de un click a un celular de la lista, se pasará su id con el método showModal:

return (
      <div className="product" onClick={()=>this.props.showModal(id)}>
         //...codigo
      </div>
    )

Information Product

Se recíbe el método hideModal desde el componente App, para poder utilizarlo con un evento onClick dentro de Icon que parece ser el icono de cierre:

return(
      <Fragment>
        <Icon iconName="fas fa-window-close" id="close-modal" onClick={this.props.hideModal} />
       //...codigo
      </Fragment>
    )

Notas de campo:

-Los métodos showModal y hideModal junto con ternary operator, manejan banderas tipo boolean, tal y como las has venido manejando en otras partes de tu app.

-Es un diseño parecido a lo que estas proponiendo, puedes incluso tratar de adaptarlo. Lo importante aquí es como se pasan los métodos y los parametros como el id del producto.

-Los siguientes cambios, son con el propósito de que puedas continuar con tu diseño original, mientras sigas con tu investigación de react podrás mejorar la app.

-Parece que la versión de tu repo de github, no esta sincronizada con tu demo live, así que solo acople el componente InformationProduct, desde aquí.

Espero que esta respuesta sea de ayuda.

2
  • Tomaré tu respuesta como correcta por si le pueda servir a alguien más, además tomaré en cuenta todo lo que escribes en tu respuesta, me será de ayuda, gracias!
    – Husdady
    Commented el 31 ene. 2021 a las 2:58
  • La demo se ve bastante bien, saludos!
    – g.4
    Commented el 31 ene. 2021 a las 3:04

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.