React.js: Function passed from parent component to child component not getting called

Question

I'm a beginner and trying to learn React. I have a parent component with a boolean in its state that I change with a function defined in its class called rerender(). I pass this function down into a child component's props like so:

<Todolist
  color={color}
  name={name}
  items={items}
  addListItem={this.addListItem}
  rerender={() => this.rerender}
/>

I have a console.log in that function to check if it is being called. I call it in the child component like this:

this.props.rerender();

I'm certain that the onChange event which calls this.props.rerender() in the child component is firing, so what are some possible reasons as to why it isn't being called?

Answer 1

this will not work hence the function is not called, 2 options:

 rerender={() => this.rerender()}

or

 rerender={this.rerender}

the latter one gets any arguments passed to it, but the first one won't get any arguments.

You may need to bind the this.renderer if it's not defined as an arrow function.