TypeError: Cannot read property 'props' of undefined in ReactJS

Dung Do Tien Jul 16 2021 227

I have a small project with ReactJS. I created an input template as below:

class InputTextTemplate extends React.Component{
    constructor(props) {
        super(props)
        this.props = props;
    };

    changeText(e)
    {
        console.log(e.target.value);
        let text = e.target.value;
        this.props.changeText(text);

    }
    render()
    {
        return (
            <div>
                <input type="text" onChange={this.changeText} value={this.props.postText} />
            </div>
        )}
}

When textbox fire text change event I got an error TypeError: Cannot read property 'props' of undefined.

Uncaught TypeError: Cannot read property 'props' of undefined
    at Constructor.render (eval at transform.run (babel-browser.min.js:4), <anonymous>:53:19)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (react.js:6157)
    at ReactCompositeComponentWrapper._renderValidatedComponent (react.js:6177)
    at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (react.js:12513)
    at ReactCompositeComponentWrapper.performInitialMount (react.js:5761)
    at ReactCompositeComponentWrapper.mountComponent (react.js:5692)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (react.js:12513)
    at Object.mountComponent (react.js:13175)
    at ReactDOMComponent.mountChildren (react.js:11891)
    at ReactDOMComponent._createInitialChildren (react.js:7055)

this.props.changeText(text); this line code throw exception. How can I fix this issue?

Thanks for any suggestions.

Have 1 answer(s) found.
  • R

    Ruslan Kurbanali Jul 16 2021

    You can try use Arrow function to register event on change for the textbox. 

    onChange={e => this.props.Your_function(e)}

    Special, in your case you can do as bellow:

    render()
        {
            return (
                <div>
                    <input type="text" onChange={e => this.props.changeText(e)} value={this.props.postText} />
                </div>
            )
        }

    I hope it works for you.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close