Es una comunicacion entre componentes padre e hijos, mando props desde el formulario a la tarjeta, y si puedo leer las props de un hijo al otro, pero no puedo hacer el cambio de imagen.
quiero que al momento de cambiar de opcion en el formulario la imagen que se supone que debe de haber en la tarjeta cambie respectivamente.
arriba de cajero se supone que debe de haber una imagen y que al cambiar de opcion se debe de mostrar el logo correspondiente a la empresa.
necesito ayuda por favor!!!
import React from 'react'
import '../css/credencial.css'
import oxxo from '../img/oxxo.png'
class Credencial extends React.Component {
state = { }
logo = (e) => {
switch (this.props.tienda) {
case 'oxxo':
return this.setState({url: {oxxo}});
//break;
default:
return 'ooh!';
}
}
render() {
const {clave, nombre, costo, cantidad, tienda} = this.props
return(
<div id="uno">
<div id="negro">
<div id="logo">
<img src={this.state.url} alt=""/>
</div>
<div id="hora">
<p>Cajero 1 - 21/Junio/2020 15:00</p>
</div>
<div id="tabla">
<table className="table table-hover">
<thead>
<tr>
<th scope="col">Clave</th>
<th scope="col">Producto</th>
<th scope="col">Costo</th>
<th scope="col">Cantidad</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{clave}</th>
<td>{nombre}</td>
<td>$ {costo}</td>
<td>{cantidad}</td>
</tr>
<tr>
<td colSpan="2" align="right">+ IVA (16%)</td>
<th scope="row">Total:</th>
<td>$ {(costo * cantidad) + (0.16)}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
)
}
}
export default Credencial