Where to put event handlers for function props in react

Question

I'm studying react, and I've written a simple component, called Confirm, to implement a confirm box

import * as React from "react";
import "./Confirm.css";

interface IProps {
    title: string;
    content: string;
    okCaption?: string;
    cancelCaption?: string;
    onOkClick: () => void;
    onCancelClick: () => void;
}

class Confirm extends React.Component<IProps> {
    public static defaultProps = {
        cancelCaption: "Cancel",
        okCaption: "OK"
        };

    private handleOnOkClick = () => {
//        console.log("OK clicked");
        this.props.onOkClick();
    }

    private handleOnCancelClick = () => {
//        console.log("Cancel clicked")
        this.props.onCancelClick();
    }

    public render() {
        return (
            <div className="confirm-wrapper confirm-visible">
                <div className="confirm-container">
                    <div className="confirm-title-container">
        <span>{this.props.title}</span>
                    </div>
                    <div className="confirm-content-container">
                        <p>{this.props.content}</p>
                    </div>
                    <div className="confirm-buttons-container">
                        <button className="confirm-cancel"
                         onClick={this.handleOnCancelClick}>{this.props.cancelCaption}</button>
                        <button className="confirm-ok"
                         onClick={this.handleOnOkClick}>{this.props.okCaption}</button>
                    </div>
                </div>
            </div>
        );
    }
}
export default Confirm;

In my App.tsx I have:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Confirm from './Confirm';


private handleCancelConfirmClick = () => {
  console.log("Cancel clicked");
};

private handleOkConfirmClick = () => {
console.log("Ok clicked");


const App = () => {

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <Confirm
        title="React and Javascript"
        content="Are you sure you want to learn them?"
        cancelCaption="No way!"
        okCaption="Yes, why not?"
        onOkClick={this.handleOkConfirmClick}
        onCancelClick={this.handleCancelConfirmClick}
      />
    </div>
  );
}


export default App;

Wherever I put the two private functions handleOkConfirmClick and handleCancelConfirmClick I get the following error:

The containing arrow function captures the global value of 'this'.  TS7041

    27 |         cancelCaption="No way!"
    28 |         okCaption="Yes, why not?"
  > 29 |         onOkClick={this.handleOkConfirmClick}
       |                    ^
    30 |         onCancelClick={this.handleCancelConfirmClick}
    31 |       />
    32 |     </div>

Where should I put the two private functions? What am I doing wrong?

Thanks

Francesco

Answer 1

this is only accessible in class components. You are creating a functional component here. You just need to call the function. Here is a sample code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Confirm from './Confirm';

const App = () => {
  const handleCancelConfirmClick = () => {
    console.log("Cancel clicked");
  };

  const handleOkConfirmClick = () => {
    console.log("Ok clicked");
  } 

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <Confirm
        title="React and Javascript"
        content="Are you sure you want to learn them?"
        cancelCaption="No way!"
        okCaption="Yes, why not?"
        onOkClick={handleOkConfirmClick}
        onCancelClick={handleCancelConfirmClick}
      />
    </div>
  );
}

export default App;

Hope this works for you.