0

Tengo el siguiente ejemplo, pues quiero pasar esta funcion a otro componente basado también en una clase. Pero como hago para utilizar ese prop en una clase?

class App extends Component {

  sayHi = () => {
    console.log('Hi from APP');
  }
  render() {
    return (
      <div className="App">
       
           <ColourShopBuilder  sayHi = {this.sayHi}/> 
       
      </div>
    );
  }
}

export default App;

class ColourShopBuilder extends Component {
 
  render() {
    return (
      <Auxilary>
        <Toolbar
         
        />
        <Modal show=
          <OrderSummary
           
          />
        </Modal>
        <Shop>
          <ShopColor
            clicked={() => this.props.sayHi}
          />
        </Shop>
      </Auxilary>
    );
  }

He probado a pasarlo asi, pero no funciona, cómo deberia hacerlo?

Edito con el component ShopColor

const shopColor = (props) => {
  const colors = props.listColors.map((c, key) => (
    <article
      onClick = {props.clicked}
      className={classes.ShopColor}
      key={key}
      style={{ backgroundColor: c.color }}
    >
      <Price price={c.price} />
      <Cart addToCart={() => props.addToCart(c.color, c.price)} />
    </article>
  ));
  return <Auxilary>{colors}</Auxilary>;
};
5
  • Aparentemente está bien, habría q ver tu componente <ShopColor/>
    – soyunewok
    el 22 dic. 2020 a las 15:32
  • He editado añadiendo el componente, lo que pasa que clico encima del article pero no me sale el mensaje que debe salir el 22 dic. 2020 a las 15:37
  • Intenta pasandole la función al componente <ShopColor /> directamente sin usar una función anómima <ShopColor clicked={this.props.sayHi}/> y declara tu función sayHi ya sea let, var o const
    – soyunewok
    el 22 dic. 2020 a las 15:48
  • Vale era eso, y una pregunta por que en una función anónima no funcionaba? el 22 dic. 2020 a las 15:55
  • 1
    Porque tu variable sayHi, es una variable que contiene una función anónima, que muestra algo por consola, luego cuando hacías clicked={() => this.props.sayHi}, estabas creando una función anónima que devolvía otra función anónima, pero nunca se ejecutaba lo que contenía esta última.
    – soyunewok
    el 22 dic. 2020 a las 16:00

1 respuesta 1

0

Aquí te dejo una explicación mas clara.

introducir la descripción de la imagen aquí

Como puedes observar "sayHi" a solas, contiene una función anónima que para poder ejecutarse debes llamar a "sayHi" como una función como tal "sayHi()"

Ahora cuando le pasas esa función a través de otra función anónima como hiciste en "clicked={() => this.props.sayHi}" que es similar a lo que hago creando otra variable "say2" en la cual creo una función anónima que me retorna mi anterior variable "sayHi". Entonces cuando ejecuto "say2()" simplemente me devuelve mi variable "sayHi" la cual contiene una función anónima

1
  • Gracias por la explicación el 22 dic. 2020 a las 18:44

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.