React: this.state disappears in a for loop

Question

How to transfer this to my .map() loop? It seems to be disappearing .: - (

I create a "dynamic form" where the user can specify multiple lines of input for their form. I want to state.items[] over all the elements in state.items[] and enter the form input fields for them.

For example, a form starts with 'field' and 'autocomplete_from. Then the user can click add a new line to get more lines in his form.

 102 render: function() { 103 return ( 104 <div> 105 {this.state.items.map(function(object, i){ 106 return ( 107 <div> 109 <FieldName/> 110 <strong> State.autocomplete_from: {this.state.autocomplete_from} </strong> // ^^^ // Uncaught TypeError: Cannot read property 'state' of undefined 120 <button onClick={this.newFieldEntry}>Create a new field</button> 121 <button onClick={this.saveAndContinue}>Save and Continue</button> 122 </div> 123 ); 124 })} 125 </div> 126 ); 

Answer 1

In .map this does not apply to your component. There are several ways to solve this problem.

• Save this in a variable

   render: function() { var _this = this; return ( <div> {this.state.items.map(function(object, i){ return ( <div> <FieldName/> <strong> State.autocomplete_from: {_this.state.autocomplete_from} </strong> <button onClick={this.newFieldEntry}>Create a new field</button> <button onClick={this.saveAndContinue}>Save and Continue</button> </div> ); })} </div> ); } 

• Set this for the .map callback (if you cannot use ES2015 functions, this option is preferable)

   this.state.items.map(function (object, i) { // .... }, this); 

• use arrow function

   this.state.items.map((object, i) => { // .... }) 

• use .bind

   this.state.items.map(function(object, i) { // .... }.bind(this)) 

Answer 2

The second argument to an iterative method like map and filter is this object

so you can use it like this:

this.state.items.map(yourfunction,this)

Answer 3

When you call a function. This parameter is set to a global object, unless it calls a member method or you call either .call or .apply , which you cannot in your case.

or, in other words, you cannot close more than this , however, you can approach the standard variable to which you assigned it. Therefore, if you have a function nested inside another funtion, and you want to do this:

 function outer(){ var _this = this; someThingThatAcceptsACallback(function(){ console.log(_this.state); } } 

Answer 4

If you use Babel or another modern EcmaScript6-> JS5 compiler, you can use a simpler syntax to maintain the context of the external context:

 { this.state.items.map((object, i) => { return ( <div> <strong> State.autocomplete_from: {this.state.autocomplete_from} </strong> /*.... your code ...*/ </div>); }); } 

Using the syntax of an arrow function, the this context is automatically bound within the contained function, so you can use this as you already were, and you don’t need to do anything special in your code.