Pass a function from a Functional Component to a Class based Component

Parent Component is like below

import React, { useState } from "react";
import EntityDefinition from "./EntityDefinition";

export default function EntitySelection(props) {

  const testFun = () => {
    console.log("Function activated");
  };
  return (
    <>
        <div>
                <EntityDefinition                  
                  testFun={testFun}
                />{/**Calling a Class based Component*/}
        </div>
    </>
  );
}

Class based Component (Child)

import React from "react";
import { ComboBox, DropdownOption, Button } from "react-widgets";
import axios from "axios";

export default class EntityDefinition extends React.Component {

  render() {
    return (
      <React.Fragment>       
        <div>
          {" "}
          <Button onClick={this.testFun}>Close</Button>{" "} {/*/Calling the function passed*/}
        </div>
      </React.Fragment>
    );
  }
}

but when i clicked the button the testFun function is not being called. i tried something like onClick={this.state.testFun} , onClick={testFun} but nothing is happening. can someone point what am i doing wrong here.

Answer

testFun is a prop. So use this.props.testFun

onClick={this.props.testFun}