How to map inside a map function in reactjs

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>              );            }}