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