CODEWITHSUNDEEP
javascriptreactjscomponents
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

this.props is undefined inside click event

Hi I have the following react component.

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const propTypes = {
    /*
     * Used to extend default object classes
     */
    classes : PropTypes.object,

    /*
     * Click event handler
     */
    onClick : PropTypes.func,

    /*
     * Delete event handler
     */
    onRequestDelete : PropTypes.func,

    /*
     * This property will contain label text
     */
    label : PropTypes.string
}

class Chip extends React.Component{

    constructor(props){
        super(props);
        this.onClick = this.onClick.bind(this);
    }

    onClick(e) {
        if (this.props.disabled) {
          e.preventDefault();
          return;
        }

        if (this.props.onClick) {
          this.props.onClick(e);
        }
    }

    handleDeleteIconClick(e){
        e.stopPropagation();

        if (this.props.onRequestDelete) {
          this.props.onRequestDelete(event);
        }
    };

    render(){

        let defaultClasses = 'chips chips-rounded';

        const {
            classes,
            onClick,
            label,
            onRequestDelete,
        } = this.props;

        return (

            <div
                className={classNames(classes, defaultClasses)}
                onClick={onClick}
            >
                <span className={classes}>{label}</span>
                {onRequestDelete ? (<div className="deleteIcon" onClick={ this.handleDeleteIconClick } />) : ''}
            </div>

        )
    }

}

Chip.PropTypes = propTypes;

export default Chip

when I run the component and trigger the handleDeleteIconClick event I get the following error. What am I doing wrong here.

Uncaught TypeError: Cannot read property 'props' of undefined
    at handleDeleteIconClick (1.a0d91201f90f20151e22.hot-update.js:86)
    at HTMLUnknownElement.boundFunc (main.bundle.js:8934)
    at Object.ReactErrorUtils.invokeGuardedCallback (main.bundle.js:8940)
    at executeDispatch (main.bundle.js:8725)
    at Object.executeDispatchesInOrder (main.bundle.js:8748)
    at executeDispatchesAndRelease (main.bundle.js:5786)
    at executeDispatchesAndReleaseTopLevel (main.bundle.js:5797)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (main.bundle.js:13425)
    at Object.processEventQueue (main.bundle.js:5997)

Upvotes: 5

Views: 2030

Answers (2)

Sajith Edirisinghe
Sajith Edirisinghe

Reputation: 1727

You can always use the fat arrow function like handleDeleteIconClick = (e) => {/* function logic */}. In this case, you don't need to bind the function in constructor and this will be available within the function with correct scope.

Upvotes: 1

EVGENY GLUKHOV
EVGENY GLUKHOV

Reputation: 106

You need to bind the context to handleDeleteIconClick in constructor like,

this.handleDeleteIconClick = this.handleDeleteIconClick.bind(this);

or put this handleDeleteIconClick.bind(this) in yor JSX, because you use keyword this in that function

Upvotes: 6

Related Questions