defining a function to pass it as props, but I get a compiling error

I have a react component that is trying to pass a function to another component, the problem is that
I’m not being able to define the function, it throws a compiling error

export default function App() {

    createActivity() {      // here I get an error: missing semicolon
        console.log("creating activity");
    }

    return ( 
        <div className = "App" >
           <Route path="/" component={ Header } />  
           <Route exact path="/" component={ShowSplashWindow} />  
           <Route path="/createactivitiy" render = {() =>
                                    <CreateActivity createActivity={this.createActivity} />} />
        </div>
    );
}

What am I missing?

Rafael

27 thoughts on “defining a function to pass it as props, but I get a compiling error”

  1. You declared component as functional, but trying to create a class method.

    You should either use class component:

    export default class App extends React.Component {...
    

    with 2 methods: createActivity and render.

    Or declare your function and assign to constant

        const createActivity = () => ...      
    

    but use it without this:

       <CreateActivity createActivity={createActivity} />
    
    Reply
  2. The function has to be declared as

    const createActivity = () => {
        console.log("creando la actividad");
    }
    

    And when passed as props, it should not be called with "this"

    <CreateActivity createActivity={createActivity} />}
    
    Reply

Leave a Comment