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) => { — Andrii Starusiev
– Andrii Starusiev, Commented Aug 28, 2017 at 7: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
– andersuamar, Commented Aug 28, 2017 at 7:22
Possible duplicate of "this" is undefined inside map function Reactjs — Mayank Shukla
– Mayank Shukla, Commented Aug 28, 2017 at 7:23
Possible duplicate of React 'cannot read property of undefined' when using map — Shubham Khatri
– Shubham Khatri, Commented Aug 28, 2017 at 7:24

Nocebo · Accepted Answer · 2017-08-28 07:22:39Z

27

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, 2017 at 7:22

Nocebo

2,0973 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sowmyasree Over a year ago

just i tried using arrow fucntion as u said,Now its throwing map of undefined

Nocebo Over a year ago

Have you evaluated, that POSFields is an array? How do you declare your function? Did you bind your function?

Nocebo Over a year ago

Did you declare your function like so: myFunction = () => {..}?

sowmyasree Over a year ago

My error is throwing at headers,and posfields is working fine

Nocebo Over a year ago

How does headers look like? Have you tried to console.log(this.headers)?

|

Andrii Starusiev · Accepted Answer · 2017-08-28 07:23:32Z

3

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

answered Aug 28, 2017 at 7:23

Andrii Starusiev

7,7842 gold badges31 silver badges40 bronze badges

Comments

jadlmir · Accepted Answer · 2018-06-05 14:18:11Z

0

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

answered Jun 5, 2018 at 14:18

jadlmir

5051 gold badge7 silver badges16 bronze badges

Comments

XxXtraCookie · Accepted Answer · 2018-07-16 09:46:29Z

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

Collectives™ on Stack Overflow

How to map inside a map function in reactjs

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related