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

Dung Do Tien Jul 16 2021 836

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

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

        let text = e.target.value;

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

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:

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

    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