Unable to call function that is outside render, from inside render (in reactjs)

Question

My issue is from trying to call selectModal from inside the render function. I thought the problems was that I needed to bind the selectModal function in the constructor but that didn't help. I still get the same error of:

FolderIcon.js:37 Uncaught TypeError: Cannot read property 'selectModal' of undefined at singleClick (FolderIcon.js:37)

It works when i use the arrow function inside HTML tags like this, onClick={ () => this.selectModal('Modal A') }, but I am trying to open the popup only when an image is double clicked

Heres the code:

class FolderIcon extends Component{

    constructor(props){
        super(props);
        this.state = {
            modal: false,
            modalInfo: ""
          }
        this.selectModal = this.selectModal.bind(this);
    }

    selectModal = (info) => {
        this.setState({
            modal: !this.state.modal,
            modalInfo: info
        })
    }



    render() {

        let clicks = [];
        let timeout;

        function singleClick(event) {
            this.selectModal('Modal A');
            alert("single click");
        }

        function doubleClick(event) {
            alert('double clicked')
        }

        function clickHandler(event) {
            event.persist()
            event.preventDefault();
            clicks.push(new Date().getTime());
            window.clearTimeout(timeout);
            timeout = window.setTimeout(() => {
                if (clicks.length > 1 && clicks[clicks.length - 1] - clicks[clicks.length - 2] < 250) {
                    doubleClick(event.target);

                } else {
                    singleClick(event.target);
                }
            }, 250);
        }
        return (
            <>
            <div>
                <img src={foldericon} onClick={clickHandler} alt="" className="folder"/>

                <p onClick={ () => this.selectModal('Modal A') }>
                     Open Modal A
                </p>

                <Modal 
                displayModal={this.state.modal}
                modalInfo={this.state.modalInfo}
                closeModal={this.selectModal}/>
            </div>
            </>

        );
    }
}

export default FolderIcon;

Answer 1

value of this isn't what you expect inside singleClick function when it is called from inside the callback function of setTimeout function.

this should refer to your FolderIcon component for singleClick function to be able to call selectModal function

Change singleClick function to use arrow function syntax so that value this inside singleClick function is FolderIcon component

const singleClick = (event) => {
     this.selectModal('Modal A');
     alert("single click");
}

Answer 2

I'd suggest you move your functions from render to the class itself. I don't see a reason here why they should be treated differently.

That way the this inside the singleClick function should reference the class defined, and the expected function should be found.