Tengo este código de React :
export default function Technologies({ technologies }) { return ( <> { Object.keys(technologies).map((key, i) => ( <span> <span className={styles.post}><h3 className={'bold300'}>{key}</h3></span> <div className={styles.techList}> <ul key={i}> { Object.keys(technologies[key]).map((key2, idx) => ( <li key={idx}>{key2} { technologies[key][key2].map(key3 => ( <span key={key3.name} className={styles.badge}><Image src={key3.name} width={key3.w} height={key3.h} /></span> )) } </li> )) } </ul> </div> </span> )) } </> ) } Aquí puede ver la iteración anidada, y en todas partes uso i o idx para crear una clave única para la lista, pero sigo recibiendo una advertencia para esta cadena:
... <ul key={i}> ... Como dije, sé lo que significa este error, e incluso sé cómo solucionarlo, pero no en este caso, simplemente no sé dónde debo poner la key para evitar esta advertencia. ¡Gracias!
La key debe estar presente en el elemento raíz. Por lo tanto, la primera key debe estar en el span y no en el ul .
export default function Technologies({ technologies }) { return ( <> {Object.keys(technologies).map((key, i) => ( <span key={i}> <span className={styles.post}> <h3 className={"bold300"}>{key}</h3> </span> <div className={styles.techList}> <ul> {Object.keys(technologies[key]).map((key2, idx) => ( <li key={idx}> {key2} {technologies[key][key2].map((key3) => ( <span key={key3.name} className={styles.badge}> <Image src={key3.name} width={key3.w} height={key3.h} /> </span> ))} </li> ))} </ul> </div> </span> ))} </> ); }