Display list of objects with properties in JSX

Question

I have the following code in my React component:

<div className="mainApp">
            <div className="pkgsList">
                {pkgData.map((p) =>
                    <h3 key={p.name}>{p.name}</h3>
                )}
                    
            </div>
        </div>
    )

In this case, pkgData is an array of objects that attempts to describe the package in this scenario. Each object contains a string property name and an array property sources, where each item is also an object. I want to print the items in sources below the h3 element (each item has several properties), but I can't seem to figure out how to add more to the above Multiple HTML/JSX - any help would be greatly appreciated.

I've been trying to call the map for each p, but whether I wrap it in () or just {} for example, I get Error

{p.map((s) => {
                       
})

So the generated div code will be:

<div className="pkgList">
                {pkgData.map((p) =>
                    <h3 key={p.name}>{p.name}</h3>
                    {p.map((c) => {
                        
                    })
                )}
            </div>

My React app is not allowed to compile successfully.

Answer 1

Like normal components, you can only return 1 jsx element in the map. If you want to render multiple elements in the map function, you can wrap the code in a react snippet like this:

<div className="mainApp">
    <div className="pkgsList">
        {pkgData.map((p) => (
            <> {/* <- this is a fragment */}
                <h3 key={p.name}>{p.name}</h3>
                {p.sources.map((s) => (
                    <>{/* render source here */}</>
                ))}
            </>
        ))}
    </div>
</div>

Answer 2

Map error

First of all, your nested map inside pkgData.map is wrong. Because p itself is not an array. The map should look like this,

{p.sources.map((c) => {
    ...
    }
  )}

JSX Error

Second, as @David said in the comments, you can't have multiple top-level elements due to the way JSX works under the hood. For example code

<div className="mainApp">
  <div className="pkgsList">
    {pkgData.map((p) => 
      <h3 key={p.name}>{p.name}</h3>                    
    )}
  </div>
</div>

is equivalent to this

<div className="mainApp">
  <div className="pkgsList">
    {pkgData.map((p) => {
      return React.createElement("h3", {key: p.name}, p.name)
      }                    
    )}
  </div>
</div>

So if you return multiple JSX elements at the top level, React.createElement will not work. Therefore, you should wrap the content at the top level using some tags like fragments(<>), div, etc.

For example,

<div className="mainApp">
  <div className="pkgsList">
    {pkgData.map((p) =>
      <>
        <h3 key={p.name}>{p.name}</h3>
        {p.sources.map((c) => 
          <p>{c.something}</p>
        )} 
      </>
    )}
  </div>
</div>

For reference only: https://react.dev/reference /react/createElement#creating-an-element-without-jsx