Tengo un componente de navegación de encabezado que representa la navegación desde dos partes de una respuesta JSON.

La navegación se procesa correctamente, pero obtengo: 'Cada niño en una lista debe tener un error de propiedad de "clave" único' aunque, por lo que puedo ver, tengo una clave para cada elemento secundario.

La identificación de ambas llamadas de mapa será completamente única.

Este es el código completo del componente hasta el momento:

 import React, { useContext } from 'react'; import { Link } from "react-router-dom"; import { HeaderContext } from '../context/headerContext'; const renderToplevelPages = (toplevelPages) => { return toplevelPages.map(({ PageUrl, NavLinkText, Id, SubNavMenuItems }) => ( <li key={Id}><Link to={PageUrl}>{NavLinkText}</Link> {SubNavMenuItems && <ul>{renderToplevelPages(SubNavMenuItems)}</ul>} </li> )); }; function Header() { const headerData = useContext(HeaderContext); return ( <nav> <Link to="/">Logo here</Link> {headerData ? <ul> <li> <Link to={headerData.Menu.PageUrl}>Menu</Link> <ul> {headerData.Menu.Categories.map(categoryItem => ( <li key={categoryItem.Id}><Link to={categoryItem.CategoryUrl}>{categoryItem.CategoryName}</Link></li> ))} </ul> </li> <li> <a className="navbar-icon fa-user snipcart-customer-signin">Login/Register</a> </li> {renderToplevelPages(headerData.TopLevelPages)} </ul> : <div></div> } </nav > ) } export default Header;