javascript - this.props is undefined inside click event - Stack Overflow

Hi I have the following react ponent.

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 ponent 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)

Hi I have the following react ponent.

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 ponent 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)

• javascript
• reactjs
• ponents

Share Improve this question Follow asked Nov 25, 2017 at 21:38 Imesh ChandrasiriImesh Chandrasiri 5,6991515 gold badges6363 silver badges107107 bronze badges 5

• are you binding handleDeleteIconClick ? – Aaqib Commented Nov 25, 2017 at 21:42
• yes I bind it to the deleteIcon element in the return statement. – Imesh Chandrasiri Commented Nov 25, 2017 at 21:42
• inside constructor you are binding this.onClick = this.onClick.bind(this); can't see habdleDeleteonClick anywhere in the code – Aaqib Commented Nov 25, 2017 at 21:46
• when I add the binding code, it throws a ReferenceError saying the handleDeleteIconClick is not defined. – Imesh Chandrasiri Commented Nov 25, 2017 at 21:50
• i am assuming you are binding it inside constructor like this.handleDeleteonClick = this.handleDeleteonClick.bind(this); – Aaqib Commented Nov 25, 2017 at 21:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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.