nested mapping not displaying data in jsx react-CodePudding

i'm trying to map data from an array of this format from a third party to jsx but it seems not to display anything. this is the array i'm mapping from.

[
[
    {
        "id": "file1",
        "link": "link.com",
        "type": "video",
        "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ",
        "name": "Mod1 Some tandom titls"
    },
    {
        "id": "file2",
        "type": "video",
        "name": "Mod1 Title bla bla bla",
        "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ",
        "link": "link.com"
    }
],
[
    {
        "id": "file1",
        "name": "Mod2 Another andom sajdf ",
        "type": "video",
        "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ",
        "link": "link.com"
    },
    {
        "id": "file2",
        "name": "mod2 some random other title",
        "type": "video",
        "link": "link.com",
        "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
    }
]]

here i tried mapping out the index with each object and name for each object but it returns nothing in the browser

modulesdata.map((module,index)=>{

                    <h1 key={index}>module{index}</h1>
                           {module.map((mod,i)=>{
                             <p>{mod.name}</p>
                           })}
                        }
                    )

CodePudding user response：

Consider the array as outerArray variable or state. If you use the first bracket "()" inside map function, you don't need to use return to render the component, If you use curly bracket "{}" you must have to return the component value inside. You must have to wrap all the element in a single element inside a map function

Use this code in your component

      {outerArray.map((innerArray, index) => (
        <>
          <h4 key={index}>Inner Array Number: {index   1}</h4>
          {innerArray.map((elm, innerIndex) => (
            <p key={innerIndex}>{elm.name}</p>
          ))}
        </>
      ))}

In this code I used first bracket "()" and it does not require return. The difference of your and my code is the curly bracket. Hope it will work..!!

CodePudding user response：

You must return the value.

modulesdata.map((module,index)=> {
   return (
        <div key={index}>
          <h1>module{index}</h1>
          {module.map((mod,i)=> <p key={i}>{mod.name}</p> )}
        </div>
          )
   })

Also, don't forget to only return one node at a time. Here, you had an h1 and a p without any wrapping root tag.