How to map inside a map function in reactjs

I have my table view.And i have posfields that are perfecting displaying by using map function.But my problem is when i'm trying to map td inside posfields map function its throwing me the error "'headers' of undefined".

{ this.POSFields.map(function (posFields, POSFieldsId) { return ( <tr> <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId} {posFields.POSFields} </td> <td> <select className="selectpicker"> <option value="">Select Value</option> {this.headers.map(function (headers) { return ( <option key={headers}>{headers}</option> ); })} </select> </td> </tr> ) })
}

4 Answers

Like @Andrew already suggested, you should use arrowfunctions in order to be able to access this within your map. You currently loose the context of this

{ this.POSFields.map((posFields, POSFieldsId) => { return ( <tr> <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId} {posFields.POSFields} </td> <td> <select className="selectpicker"> <option value="">Select Value</option> {this.headers.map((headers) => { return ( <option key={headers}>{headers}</option> ); })} </select> </td> </tr> ) })
}

Bind map function to have access to this context:

{ this.POSFields.map(function (posFields, POSFieldsId) { return ( <tr> <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId} {posFields.POSFields} </td> <td> <select className="selectpicker"> <option value="">Select Value</option> {this.headers.map(function (headers) { return ( <option key={headers}>{headers}</option> ); })} </select> </td> </tr> ) }.bind(this))
}

Or the arrow functions this.POSFields.map((posFields, POSFieldsId) => {

i usually use a function inside a function to return map func

{ this.POSFields.map(function (posFields, POSFieldsId) { return ( <tr> <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId} {posFields.POSFields} </td> <td> <select className="selectpicker"> <option value="">Select Value</option> {this.getData()} </select> </td> </tr> ) })
}
getData(){
return this.headers.map(function (headers) { return ( <option key={headers}>{headers}</option> ); }}

It is the same as @Nocebo answered but with a little correction on the keys. They should be in the tag rather in the one below. If you open you browsers console you will see a warning about it:

{ this.POSFields.map((posFields, POSFieldsId) => { return ( <tr key={POSFieldsId}> <td className="posheader" value={posFields.POSFieldsId} {posFields.POSFields} </td> <td> <select className="selectpicker"> <option value="">Select Value</option> {this.headers.map((headers) => { return ( <option key={headers}>{headers}</option> ); })} </select> </td> </tr> ) })
}