this.props.function is not a function - React js

Question

My goals are to make a redirection with a BACK button, but until now no success. When i'm trying to pass a function from child to parent it return me :

_this.props.callHomeFunction is not a function

Parent.js

  constructor(props) {
        super(props);
        this.state = {
            okRedirect: false,
        }

        this.consoleToHome = this.consoleToHome.bind(this)
    }

    consoleToHome = (test) => {
        // this.setState({ okRedirect: true });
        console.log('go to home');
        console.log(test);
    }
render(){
  return(
    <Router>
      <Select callHomeFunction={this.consoleToHome} />

Child.js

class BackButton extends Component {

  changePage = () => {
    const test = 'test';
    console.log('click on home');
    console.log(this.props);
    this.props.callHomeFunction(test);
  }
render() {
    return (
      <div className='back_buttons'>
        <ul>
          <li>
            <button className='back_buttons back_button'
              onClick={this.changePage}
            >

You don't have to bind consoleToHome on this as you are using an arrow function. (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) — samb102
– samb102, Commented Feb 19, 2019 at 10:38
@estus if i pass onClick={this.changePage()} the result is the same , but this time doesnt show the next page after the Home — PandaMastr
– PandaMastr, Commented Feb 19, 2019 at 11:48
it should be onClick={this.changePage}, not onClick={this.changePage()}. If the problem persists, consider updating the question with stackoverflow.com/help/mcve that reflects your current attempt. — Estus Flask
– Estus Flask, Commented Feb 19, 2019 at 11:51

zakir · Accepted Answer · 2019-02-19 14:28:12Z

1

Your binding's of the components are correct as far I see the code,

Please check the Component names, You child Component name is BackButton but when you are including you are using <select>.

If the above didn't solve the problem please post your error

answered Feb 19, 2019 at 14:28

zakir

2,4502 gold badges15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PandaMastr Over a year ago

yep i found my mistake . Cheers mate !

Mohit Prakash · Accepted Answer · 2019-02-19 11:18:56Z

0

Use constructor with super function in Child.js

constructor(props) {
    super(props);
}

Hope it will work

answered Feb 19, 2019 at 11:18

Mohit Prakash

5122 gold badges7 silver badges17 bronze badges

3 Comments

PandaMastr Over a year ago

nope , i had a constructor before , but the result is the same

Mohit Prakash Over a year ago

lets try to add bind method in onclick method like this onClick={this.changePage.bind()} and also add constructor with super constructor(props) { super(props); }

PandaMastr Over a year ago

Unfortunately the result stays the same

Collectives™ on Stack Overflow

this.props.function is not a function - React js

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related