How to map inside a map function in reactjs

Question

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

Use arrow functions in both map functions `this.POSFields.map((posFields, POSFieldsId) => {` — Andrew, Aug 28 '17 at 07:20
This seems to be undefined inside the second map. Have you tried to change the functions passed to the map methods for arrow functions? — andersuamar, Aug 28 '17 at 07:22
Possible duplicate of ["this" is undefined inside map function Reactjs](https://stackoverflow.com/questions/30148827/this-is-undefined-inside-map-function-reactjs) — Mayank Shukla, Aug 28 '17 at 07:23
Possible duplicate of [React 'cannot read property of undefined' when using map](https://stackoverflow.com/questions/45010544/react-cannot-read-property-of-undefined-when-using-map) — Shubham Khatri, Aug 28 '17 at 07:24

score 21 · Accepted Answer · answered Aug 28 '17 at 07:22

21

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

answered Aug 28 '17 at 07:22

Nocebo

1,696
3
13
25

just i tried using arrow fucntion as u said,Now its throwing map of undefined – sowmyasree Aug 28 '17 at 07:29
Have you evaluated, that `POSFields` is an array? How do you declare your function? Did you bind your function? – Nocebo Aug 28 '17 at 07:30
Did you declare your function like so: `myFunction = () => {..}`? – Nocebo Aug 28 '17 at 07:30
My error is throwing at headers,and posfields is working fine – sowmyasree Aug 28 '17 at 07:31
How does `headers` look like? Have you tried to `console.log(this.headers)`? – Nocebo Aug 28 '17 at 07:33
hey thanx guys,Arrow function helped for me,Thanq so much for your time :) – sowmyasree Aug 28 '17 at 07:34

score 3 · Answer 2 · answered Aug 28 '17 at 07:23

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) => {

score 0 · Answer 3 · answered Jun 05 '18 at 14:18

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

score 0 · Answer 4 · answered Jul 16 '18 at 09:46

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

How to map inside a map function in reactjs

4 Answers4

Linked