0

Esta es la estructura de mi App.js

    import Cabecera from './components/Cabecera'
    import './App.css';
    
    function App() {
      manejaClick = () => {
        console.log('He sido clickeado!');
      }
      const miau = 'Bienvenido miau'
      return (
    <div className="App">
      <Cabecera miau={miau} manejaClick={this.manejaClick} />
    </div>
  );
}

export default App;

Pero arroja el siguiente error

src\App.js
  Line 5:3:  'manejaClick' is not defined  no-undef

Search for the keywords to learn more about each error.

Esta es la url del repo https://github.com/kikedb/hello-world/blob/main/src/App.js

3 respuestas 3

1

El problema es que estás mezclando un componente de clase con un componente funcional (info).

En el código de tu pregunta tienes un componente funcional pero estás haciendo referencia a this que se usa en los componentes de clase para hacer referencia al propio componente. De ahí que te diga que no encuentra la función manejaClick porque this es undefined en un componente funcional.

Dicho código te funcionaría simplemente quitando el this. de manejaClick={this.manejaClick} y definiendo la función manejaClick como:

const manejaClick = () => {
        console.log('He sido clickeado!');
      }

Dicho lo cual. Te desaconsejo que utilices los componentes de clase. El equipo de React hace tiempo que apostó por los componentes funcionales utilizando los Hooks para el manejo de estados (entiendo que llegarás pronto a los estados). Por lo que deberías quedarte con tu primer código con las modificaciones que te he comentado.

2
  • Gracias por tu aclaracion, ahora entiendo porque ambas declaraciones son distintas el 3 feb. 2021 a las 21:55
  • De nada. Un buen ejercicio es cambiar tu código actual del repositorio y pasar los componentes de clase a funcionales.
    – Kiko_L
    el 4 feb. 2021 a las 10:02
0

Averiguando tube que cambiar la estructura del componente App.js dejandolo de la siguiente manera

import React, { Component } from 'react';
import Cabecera from './components/Cabecera'
import './App.css';

class App extends Component {
  manejaClick = () => {
    console.log('He sido clickeado!');
  }
  render () {
    const miau = 'Bienvenido miau'
    return (
      <div className="App">
        <Cabecera miau={miau} manejaClick={this.manejaClick} />
      </div>
    )
  }
}

export default App;

y funciono, pero no entiendo mucho la razon ya que soy nuevo en react, si es que alguien podria explicarmelo seria genial. Saludos!

-1

prueba:

manejaClick () {
    console.log('He sido clickeado!');
}

y es this.manejaClick()

5
  • 2
    Una explicación no estaría de más. ¿Qué error cometió el OP?
    – Candid Moe
    el 2 feb. 2021 a las 11:43
  • Hola, gracias por tu respuesta, intente con lo que me indicas pero me arroja un error Unexpected token, expected ";" (5:17) el 2 feb. 2021 a las 12:36
  • Candid Moe que significa OP ? el 2 feb. 2021 a las 12:41
  • depende de como de la herramienta del build ,aveces rechaza ese tipo de escritura ,por q es una redundancia o innecesaria , no con todas los build pero si a veces. aparte falto la llamada a la funcion " () "
    – Will Mend
    el 3 feb. 2021 a las 9:50
  • 1
    @WillMend "OP" viene del sitio en inglés, es para el Original Publisher. Como quien dice, el que puso la pregunta e inició el hilo
    – Alfabravo
    el 3 feb. 2021 a las 17:47

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.