Cannot Read Property 'string' of Undefined React Native

The issue Cannot read the property of undefined is quite common in JavaScript. When the variable is not defined, JavaScript can not read the undefined variable or property. A similar issue we can notice in React JS. We analyze the upshot and effort to find a solution.

TypeError: Cannot read property 'state' of undefined

            import React from 'react'; import * every bit courseActions from '../Redux/deportment/courseAction'; import propTypes from 'prop-types'; import { connect } from 'react-redux'; class CoursePage extends React.Component {   state = {     course: {       championship: '',     },   };    handlechange  (result) {     const course = { ...this.state.course, title: event.target.value };     this.setState({ class });   };    handleSubmit(outcome) {     event.preventDefault();     this.props.dispatch(courseActions.createCourse(this.country.course));   };   render() {     render (       <form onSubmit={this.handleSubmit}>         <h2>courses</h2>         <h3>Add course</h3>         <input           type='text'           onChange={this.handlechange}           value={this.state.course.title}         />         <input type='submit' value='save' />       </class>     );   } }                      

Solution

The issue hither is not nosotros what expect i.e. 'Cannot read property 'state' of undefined', There are iii approaches in context binding in react.

                      handlechange() {     const course = { …this.state.course, title: issue.target.value };      this.setState({ course }); }        

Approach ane: Demark 'this' context to own instance – Less preferred

            course CoursePage extends React.Component {   state = {     grade: {       championship: '',     },    }; handlechange() {     const course = { …this.state.course, title: event.target.value };      this.setState({ class }); } render(){     render (       <grade> 			<h2>courses</h2> 			<h3>Add form</h3> 			<input 			type='text' 			onChange={this.handlechange.demark(this)} 			value={this.state.course.title} 			/> 			<input type='submit' value='save' /> 	  </form>  		);   } }                      

This works, considering now this context bound to our class context, i.e {this.handlechange.demark(this)} to the onChange event, but It will cause to create an in-office unnecessarily on each render…

Approach ii : Binding in the Constructor – Less preferred than Arrow office

The most mutual arroyo will be to practise information technology in theconstructor because it runs only once, now the function is bound simply once, this is called context-binding in the constructor, this approach is preferable, won't exist reallocated on each render

            class CoursePage extends React.Component {   constructor(props) {     super(props);     this.state = {       form: {         championship: "",       },     };     //binding in constuctor      this.handlechange= this.handlechange.bind(this);   };  handlechange() {     const class = { …this.state.grade, title: result.target.value };      this.setState({ course }); } return (       <grade> 			<h2>courses</h2> 			<h3>Add course</h3> 			<input 			type='text' 			onChange={this.handlechange} 			value={this.state.course.title} 			/> 			<input type='submit' value='save' /> 	  </form>  		);   } }                      

performance wise it is better to bind in the constructor. The bind in constructor method will create a single instance of the part and re-use information technology, even if the render method is called multiple times

Approach three: Pointer functions – More preferred

Inherit the binding context of their enclosing scope. basically, they don't have 'this' bounden, 'this' keyword inside references the class instance.

            class CoursePage extends React.Component {   country = { course: { championship: '' } };   handlechange = (consequence) => {     const course = { ...this.state.class, title: event.target.value };     this.setState({ course });   };   render() {     return (       <course>         <h2>courses</h2>         <h3>Add course</h3>         <input           blazon='text'           onChange={this.handlechange}           value={this.state.course.championship}         />         <input blazon='submit' value='save' />       </form>     );   }          

Tip: How the Arrow function preferred in react state to attain context binding?

Arrow functions are peachy. They do look nicer, But there is a much better reason to use arrow functions.  It would exist more efficient if we know, when and where y'all are using it.

          handlechange = (effect) => {     const course = { ...this.state.course, title: result.target.value };     this.setState({ course });   };                  

In above example, the arrow function does non recreate role on each return, Similar to how binding in the constructor works in 2nd approach.

Cannot Read Property 'string' of Undefined React Native

Source: https://techstrology.com/cannot-read-property-state-of-undefined-reactjs/

Share this post