0

al cambiar de opcion de tienda va a cambiar el logo

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

1 respuesta 1

0

En que momento llamas a tu funcion logo?

se me ocurre que podrias crear un objeto con las opciones de tiendas, y asi evitas el switch y hacer un setState. En los siempre llegara la tienda que hayas seleccionado y el componente hara un re-render.

const TIENDAS = {
  oxxo: 'rutaOxxo.jpg',
  seven: 'seven.jpg;
};
// en el metodo render
<img src={TIENDAS[tienda]} alt=""/>

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.