TypeError: Cannot read property 'props' of undefined in ReactJS
Dung Do Tien
Jul 16 2021
215
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.
-
R1
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.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.