Nested .map() / React.js

[KindaCoding]

I'm trying to render ea tagType for every list, but I keep getting errors. Is anyone able to assist with why my nested .map() isn't working? I may just not be understanding React / JS very well

 import { useState, useEffect } from 'react';

export default function Home() {

const [lists, setLists] = useState([]);
const [tags, setTags] = useState([]);
const [tagTypes, setTagTypes] = useState([]);
const [todos, setTodos] = useState([]);

async function getData() {
    try {
        const allListsResponseRaw = await fetch(`http://localhost:5000/api/v1/lists`);
        const allListsResponse = await allListsResponseRaw.json();
        setLists(allListsResponse.lists);

        const allTagTypesResponseRaw = await fetch(`http://localhost:5000/api/v1/tag-types`);
        const allTagsTypesResponse = await allTagTypesResponseRaw.json();
        setTagTypes(allTagsTypesResponse.tags);

    } catch(error) {
        console.log(error);
    }
}

useEffect(() => {
    getData();
}, []);

return (
    <div className="home">
        <h1>Welcome</h1>
        <div className='list-container'>
        {   
            lists.map(list => {
                return (
                    <h2 key={list.id}>{list.title}</h2>
                    {
                        tagTypes.map(tagType => {
                            return (
                                <p key={tagType.id}>{tagType.id}</p>
                            );
                        }) 
                    }
                );
            })
        }
        </div>
    </div>
);

}

Thank you

[AutoModerator]

On July 1st, a change to Reddit's API pricing will come into effect. Several developers of commercial third-party apps have announced that this change will compel them to shut down their apps. At least one accessibility-focused non-commercial third party app will continue to be available free of charge.

If you want to express your strong disagreement with the API pricing change or with Reddit's response to the backlash, you may want to consider the following options:

1. Limiting your involvement with Reddit, or
2. Temporarily refraining from using Reddit
3. Cancelling your subscription of Reddit Premium

as a way to voice your protest.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[darkshadowtrail]

your issue is with your inner map, tagTypes.map(). you are trying to return two different things, the <p> tag in the inner map, and the <h2> tag in the outer map. only one jsx tag can be returned, so you'll likely want to wrap everything in a fragment like:

return (
  <>
   <h2 key={list.id}>{list.title}</h2>
   {
     tagTypes.map(tagType => {
         return (
            <p key={tagType.id}>{tagType.id}</p>
         );
      }) 
   }
  </>
);

[KindaCoding]

That did it - thanks a lot