javascript - How to properly import function in a ReactJS file

Question

I'm having trouble importing a function in react. I used export default to export the function. However after importing it I tried to bind it in the render function but I got an error saying TypeError: Cannot read property 'bind' of undefined. Does this mean the function did not correctly import? How do I correctly import it in React?

import  onSignUp  from '../../functions/onsignup'
    class ModalExample extends React.Component {
    constructor(props) {
        super(props);
    }

     this.onSignUp=this.onSignUp.bind(this);
    }
    render(){
    return(...)
    }

Answer 1

It looks like you have an extra bracket in there, also, the imported function will just be onSignUp not this.onSignUp.

import  onSignUp  from '../../functions/onsignup'

class ModalExample extends React.Component {

  constructor(props) {
    super(props);
    this.onSignUp = onSignUp.bind(this);
  }

  render(){
    return(...)
  }
}

You should bind the function in the ctor or alternatively assign it in the class to onSignup like this:

import  onSignUp  from '../../functions/onsignup'

class ModalExample extends React.Component {

  constructor(props) {
    super(props);
  }

  onSignUp = onSignUp.bind(this);

  render(){
    return(...)
  }
}

(I think)