My unique key is not working for my array mapping.

The Link component is from react-scroll. I've therefore wrapped it into a tag, and setting the key here (thinking this could be where the issue is from)

I understand using index for setting a unique key is bad practice. But I am really just trying to remove the warning message a this point!

Any help would be very much appreciated.

My code:

import styles from '../styles/NavImage.module.css'
import { Link } from 'react-scroll'

const NAVLINKSHOVER = ['About', 'Club', 'Team', 'Timing', 'FAQ']

const NavImage = ({toggleFaq, toggleState, hoveredIndex, setHoveredIndex}) => {

    const handleClick = () => {
        toggleFaq();
      };

    return ( 
        <nav className={styles.navbar}>
            <div className={styles.linkContainer}>
               {
                    NAVLINKSHOVER.map ((navLink, index) => {
                        if (navLink === 'FAQ') {
                            return  (
                                toggleState?(
                                    <div key={index}>
                                        <Link 
                                            to="main"
                                            smooth={true}
                                            offset={0}
                                            duration={0}
                                            onClick={handleClick}
                                            className={`${styles.navLinks} ${styles.linkNotActive}`}
                                            >FAQ
                                        </Link>
                                    </div>
                                ):(
                                    <div key={index.toString()}>
                                        <Link 
                                            to="faq"
                                            smooth={true}
                                            offset={500}
                                            duration={200}
                                            onClick={handleClick}
                                            className={`${styles.navLinks} ${styles.linkNotActive}`}
                                            >FAQ
                                        </Link>                                     
                                    </div>
                                )
                            )
                        }
                        return (
                            <>
                                <a 
                                    className={`${styles.navLinks} ${hoveredIndex === index? styles.linkActive : styles.linkNotActive}`}
                                    onm ouseEnter={() => setHoveredIndex(index)}
                                    onm ouseLeave={() => setHoveredIndex(-1)}
                                    key={index.toString()}
                                >
                                    {navLink}
                                </a>
                                {
                                    index!==NAVLINKSHOVER.length-1? <p className={styles.divider}> | </p> : null
                                }
                            </>
                        )
                    })
                }
            </div>
        </nav>
     );
}
 
export default NavImage;

CodePudding user response：

You're returning a key in the case of FAQ, but not in any other cases; see here?

return (
    <>    <---- no key
        <a 

The top component returned needs a key. The string being iterated over would serve nicely without using the index.

{
    NAVLINKSHOVER.map ((navLink, index) => {
        if (navLink === 'FAQ') {
            return  (
                toggleState?(
                    <div key="faq-main">
                        <Link 
                            to="main"
                            smooth={true}
                            offset={0}
                            duration={0}
                            onClick={handleClick}
                            className={`${styles.navLinks} ${styles.linkNotActive}`}
                            >FAQ
                        </Link>
                    </div>
                ):(
                    <div key="faq">
                        <Link 
                            to="faq"
                            smooth={true}
                            offset={500}
                            duration={200}
                            onClick={handleClick}
                            className={`${styles.navLinks} ${styles.linkNotActive}`}
                            >FAQ
                        </Link>                                     
                    </div>
                )
            )
        }
        return (
            <React.Fragment key={navLink}>
                <a 
                    className={`${styles.navLinks} ${hoveredIndex === index? styles.linkActive : styles.linkNotActive}`}
                    onm ouseEnter={() => setHoveredIndex(index)}
                    onm ouseLeave={() => setHoveredIndex(-1)}
                    key={index.toString()}
                >
                    {navLink}
                </a>
                {
                    index!==NAVLINKSHOVER.length-1? <p className={styles.divider}> | </p> : null
                }
            </React.Fragment>
        )
    })
}

CodePudding user response：

You should wrap the bottom return statement in a div and then give that div a key, if you want to get rid of the warning.

<div key={index.toString()}>
        <a
          className={`${styles.navLinks} ${
            hoveredIndex === index ? styles.linkActive : styles.linkNotActive
          }`}
          onm ouseEnter={() => setHoveredIndex(index)}
          onm ouseLeave={() => setHoveredIndex(-1)}
        >
          {navLink}
        </a>
        {index !== NAVLINKSHOVER.length - 1 ? (
          <p className={styles.divider}> | </p>
        ) : null}
</div>

Pls note it is still a bad practice to use index as a key.