Added key prop || Warning: Each child in a list should have a unique "key" prop

Question

Running into the error message: Warning: Each child in a list should have a unique "key" prop.

Without stating the obvious, I've checked here and others have said to add the "key" prop.

I've done that and still get the error. Might be missing something totally obvious but could you be so kind as to point out what I'm missing please:

createPlaylist = () => { 
        return (
            <>
                <h2>Expected Result</h2>
                <ul key={"playlist"}>
                {
                    this.state.playlist.map((section, index) => (
                        <>
                        <li key={index}><h4>{section.sectionName}</h4></li>
                        <ul key={section.sectionId}>
                            {
                                section.lessons.map((lesson, i) => (
                                    <li key={i}>
                                    {lesson.name}<br/>
                                    </li>   
                                ))
                            }
                        </ul>
                        </>
                    )     
                    )   
                }
                </ul>
            </>
        )
    }

All IDs are unique and because it's only using a few items, I've swapped between the index and the uuid and still get the same error. The sections and lessons don't have duplicated uuids.

Stumped as to what's causing the error.

Another question to ask and one that may help the community greatly: how can I determine what is causing the error?

The message is very generic and doesn't specify which element in the list is missing the key prop or where the error lies.

Thank you in advance!

Answer 1

Please pass key at root level element.

createPlaylist = () => { 
        return (
            <>
                <h2>Expected Result</h2>
                <ul key={"playlist"}>
                {
                    this.state.playlist.map((section, index) => (
                        <key={index}>
                        <li ><h4>{section.sectionName}</h4></li>
                        <ul >
                            {
                                section.lessons.map((lesson, i) => (
                                    <li key={i}>
                                    {lesson.name}<br/>
                                    </li>   
                                ))
                            }
                        </ul>
                        </>
                    )     
                    )   
                }
                </ul>
            </>
        )
    }

Answer 2

You need the key prop pass to the wrapper component. In this case

createPlaylist = () => { 
        return (
            <>
                <h2>Expected Result</h2>
                <ul key={"playlist"}>
                {
                    this.state.playlist.map((section, index) => (
                        <key={keyId}> // you need pass the key prop here.
                        <li ><h4>{section.sectionName}</h4></li>
                        <ul >
                            {
                                section.lessons.map((lesson, i) => (
                                    <li key={i}>
                                    {lesson.name}<br/>
                                    </li>   
                                ))
                            }
                        </ul>
                        </>
                    )     
                    )   
                }
                </ul>
            </>
        )
    }