How to run map inside map function in Reactjs

Question

I want my axios part should run first inside useEffect so that my state can be update first and then further I can use that.

Here is error:

TypeError: Cannot read property map of undefined

When I console it shows states is not updated it holds SwitchCOM empty array

That means it directly goes for the return statement without running useEffect axios part.

This is what my SwitchCom state look like:

SwitchCOM: {
  0: {id: "36", name: "XYZ", progress: "", details: [{id: "36", name: "XYZ", progress: ""}]},
  1: {id: "83", name: "ABC", progress: "",  details: [{id: "36", name: "XYZ", progress: ""}]},
  2: {id: "77", name: "EFG", progress: "",  details: [{id: "36", name: "XYZ", progress: "" }]}
}

const initialState = {
    SwitchCOM: [],
    isFetching: false,
    hasError: false
}

{states.SwitchCOM.map(topis => (
  <div className="item" key={topis.id}>
    <p>{topis.name}</p>
    <p>
      <progress id="file" value="32" max="100">
        {topis.progress}
      </progress>
    </p>
    {topis.activities.map(activity => (
      <table key={activity.id}>
        <tbody>
          <tr>
            <td>Name</td>
            <td>Progress</td>
            <td>Status</td>
          </tr>
          <tr >
            <td>{activity.name}</td>
            <td>{activity.prog}</td>
          </tr>
        </tbody>
      </table>
    ))}
  </div>
))}

Barry Michael Doyle · Accepted Answer · 2020-05-01 20:23:56Z

2

You are trying to map through an object which won't work. Instead you need to use Object.keys(...) to accomplish what you want here.

You should do something like this:

{Object.keys(states.SwitchCOM).map(key => (
  <div className="item" key={states.SwitchCOM[key].id}>
    <p>{states.SwitchCOM[key].name}</p>
    <p>
      <progress id="file" value="32" max="100">
        {states.SwitchCOM[key].progress}
      </progress>
    </p>
    {states.SwitchCOM[key].details.map(detail => (
      <table key={detail.id}>
        <tbody>
          <tr>
            <td>Name</td>
            <td>Progress</td>
          </tr>
          <tr>
            <td>{detail.name}</td>
            <td>{detail.progress}</td>
          </tr>
        </tbody>
      </table>
    ))}
  </div>
))}

edited May 1, 2020 at 20:23

answered May 1, 2020 at 18:40

Barry Michael Doyle

10.8k33 gold badges98 silver badges161 bronze badges

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

6 Comments

Akhi21 Over a year ago

hi @Barry Michael Doyle i made the changes in my code but again my map is not running as i have called map inside of map SwitchCOM: [] contain an array activities which also i want to run

Akhi21 Over a year ago

hi @Barry Michael Doyle I just update my question how my state look like

Akhi21 Over a year ago

Hi @Barry Michael Doyle if i write in this way topis.details.map(detail => it throws error topis is not defined

Akhi21 Over a year ago

its look something like this Inside of SwitchCOM array { 0: {id: "36", name: "XYZ", progress: "", details: [{id: "36", name: "XYZ", progress: ""}]}

Akhi21 Over a year ago

I think its and array of object {SwitchCOM : Array(5), isFetching: true, hasError: false} and inside of SwitchCOM when i open { 0: {id: "36", name: "XYZ", progress: "", details: [{id: "36", name: "XYZ", progress: ""}]}

|

Collectives™ on Stack Overflow

How to run map inside map function in Reactjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related