React 'this' undefined when calling a callback function in a class from a function child component

Question

I have a class component as a parent and a functional component as a child of the class component. I'm passing a callback function to the child as a prop, but when I call it I get a type error:

"TypeError: this.setState is not a function"

in the function in the parent.

Any ideas on how to solve this?

[EDIT] Code example.

Parent component:

import React, { Component } from 'react';

class NotificationsLayout extends React.Component {
    editConfigCompleted() {
        this.setState({
            templateDataChangedForTasksComponent: true,
            templateDataChangedForTemplatesComponent: true
        })
        this.closeEditConfigModal();
    }

    render() {        
        return (
            <div className="animated fadeIn">
                <RecipientConfigEditor completionAction={this.editConfigCompleted} />
            </div>
        )
    }
}

export default NotificationsLayout;

Child component:

import React, { useState, useEffect, useContext } from 'react';

export default function RecipientConfigEditor(completionAction) {

    function handleButtonClick() {
        completionAction();
    }

    return (
        <button onClick={handleButtonClick}></button>
    )
});

Can you share the code in question? Likely you need to define the callback function correctly to have `this` of the parent component bound to it. — Drew Reese, Jan 19 '20 at 06:36
you need to bind you callback function with your class component before passing it to child component — Jatin Parmar, Jan 19 '20 at 06:49
Additional information: [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/1218980) — Emile Bergeron, Jan 19 '20 at 07:03

score 1 · Answer 1 · answered Jan 19 '20 at 06:59

Either bind in a constructor

import React, { Component } from "react";
import RecipientConfigEditor from '....wherever';

class NotificationsLayout extends Component {
  constructor(props) {
    super(props);
    this.editConfigCompleted = this.editConfigCompleted.bind(this);
  }

  editConfigCompleted() {
    this.setState({
      templateDataChangedForTasksComponent: true,
      templateDataChangedForTemplatesComponent: true
    });
    this.closeEditConfigModal();
  }

  render() {
    return (
      <div className="animated fadeIn">
        <RecipientConfigEditor completionAction={this.editConfigCompleted} />
      </div>
    );
  }
}

export default NotificationsLayout;

or bind when setting callback

import React, { Component } from "react";
import RecipientConfigEditor from '....wherever';

class NotificationsLayout extends Component {
  editConfigCompleted() {
    this.setState({
      templateDataChangedForTasksComponent: true,
      templateDataChangedForTemplatesComponent: true
    });
    this.closeEditConfigModal();
  }

  render() {
    return (
      <div className="animated fadeIn">
        <RecipientConfigEditor completionAction={this.editConfigCompleted.bind(this)} />
      </div>
    );
  }
}

export default NotificationsLayout;

This worked. Thanks mate! – user356443 Jan 19 '20 at 07:17 — user356443, Jan 19 '20 at 07:17

React 'this' undefined when calling a callback function in a class from a function child component

1 Answers1