react js : display items using map method

Question

i want to display submodule names also inside div this is my api data

"predefined": [
        {
            "id": 2,
            "mainModule": "bonding",
            "description": "some random description 2",
            
            "sub_module": [
                {
                    "id": 3,
                    "subModuleName": "activity of bonding",
                    "completed": false
                },
                {
                    "id": 4,
                    "subModuleName": "self care",
                    "completed": false
                }
            ]
        },
        {
            "id": 1,
            "mainModule": "main module 1",
            "description": "some random description",
         
            "sub_module": [
                {
                    "id": 1,
                    "subModuleName": "sub module 1",
                    "completed": false
                },
                {
                    "id": 2,
                    "subModuleName": "sub module 2",
                    "completed": false
                }
            ]
        }
    ],

this is my axios to fetch the data from api and set my state called items

   axios
      .get(
        "url",
        config
      )
      .then((res) => {
      
        this.setState({ items: res.data.predefined });
       

       
      });
  }

this is the jsx i have used to display my api here personData.mainmodule and personData.description works fine since submoule names are inside an arrray not rendering i cannot use it as {personData.sub_module[0].subModuleName}

   {this.state.items.map((personData) => {
              return (
                <>
                
                  <div className="activity">
                   
                  
                        <h3>{personData.mainModule}</h3>
                      
                      
                        
                            <span>{personData.description}</span>
                       
                     
                          {this.state.item.map((personData) => {
                            return (
                              <>
                                {personData.sub_module.subModuleName}  //error
                              </>
                            );
                          })}
                        </div>
                       
                </>
              );
            })}

Tuan Dao · Accepted Answer · 2021-10-01 08:05:56Z

3

You should use current personData variable to access sub_module properties. And then you use another Array.map to render it.

{
    personData.sub_module.map(item => {
        return (
            <>
                {item.subModuleName}
            </>
        );
    })
}

edited Oct 1, 2021 at 8:05

answered Oct 1, 2021 at 8:02

Tuan Dao

2,8151 gold badge14 silver badges21 bronze badges

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

2 Comments

Dimitar Over a year ago

I edited your answer instead of mine, sorry :/

Tuan Dao Over a year ago

@DimitarVeljanovski it's ok :))) same result.

Dimitar · Accepted Answer · 2021-10-01 08:02:25Z

2

{
    personData.sub_module.map(item => {
        return (
            <>
                {item.subModuleName}
            </>
        );
    })
}

answered Oct 1, 2021 at 8:02

Dimitar

1,18910 silver badges43 bronze badges

Comments

Danielprabhakaran N · Accepted Answer · 2021-10-01 08:06:36Z

0

You don't need to iterate this.state.items again to get sub_module. You can do like this

    {this.state.items.map((personData) => {
        return (
          <>
            <div className="activity">
              <h3>{personData.mainModule}</h3>

              <span>{personData.description}</span>

              {personData.sub_module.map((data) => {
                return <div>{data.subModuleName}</div>;
              })}
            </div>
          </>
        );
      })}

This way you can iterate sub_module properly.

answered Oct 1, 2021 at 8:06

Danielprabhakaran N

5851 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

react js : display items using map method

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related