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> {celulares[this.props.i].modelo}</span></h3>
<h3>Marca:<span> {celulares[this.props.i].marca}</span></h3>
<h3>Memoria RAM:<span> {celulares[this.props.i].ram}</span></h3>
<h3>Batería: <span>{celulares[this.props.i].bateria}</span> <span>mAh</span></h3>
<h3>Camara Frontal: <span>{celulares[this.props.i].camara}</span> <span>MP</span></h3>
<h3>Resolución:<span> {celulares[this.props.i].resolucion}</span></h3>
<h3>Precio: <span>$/.</span> <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!