Framer motion new animation and exit not working with mapping-CodePudding

for some reason my exit and new animation is not working. I would like new animation to start every time user click on different menu link. I have also tried with " animate='visible'" , and I have tried also to put directly over motion, and it still not doing exit or starting new animation. I am using .map and framer motion together. Can someone please check it out.

This is the code

Thanks

const [forMapping, setForMapping] = useState(wines)

function menuHandler(index, alt) {
    setIsActive(index)
    if (alt === 'wine') {
        setForMapping(wines)
    } else if (alt === 'rakia') {
        setForMapping(rakia)
    }
}


    const variants = {
    visible: i => ({
        y: 0,
        transition: {
            duration: .7
        }
    }),
    hidden: {
        y: '40%'
    }
}


            <AnimatePresence>
                {forMapping.map((item, index) => {
                    const {
                        name,
                        description,
                        alt,
                        imageSrc,
                        price,
                        glass_price,
                        iconSrc,
                        alc
                    } = item;
                    return (
                        <motion.div
                            exit={{y: '100'}}
                            viewport={{once: true}}
                            custom={index}
                            whileInView='visible'
                            initial='hidden'
                            variants={variants}

                            key={index}
                            className='item'>
                            <div className="image">
                                <Image
                                    width={200}
                                    height={400}
                                    objectFit='cover'
                                    src={imageSrc}
                                    alt={alt}/>
                            </div>
                            <div className="info">
                                <div className="info-header">
                                    <header>
                                        {name}
                                    </header>
                                    <p className="price">
                                        {price.toFixed(2)} EUR
                                    </p>
                                </div>
                                <p className="description">
                                    {description}
                                </p>
                                <div className="bottom">
                                    <p>
                                        {alc} %VOL
                                    </p>
                                    <div className='image-price'>
                                        <Image
                                            width={18}
                                            height={20}
                                            objectFit='cover'
                                            src={iconSrc}
                                            alt='wine glass'/>
                                        <p className="black">
                                            {glass_price.toFixed(2)} EUR
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    )
                })}
            </AnimatePresence>

CodePudding user response：

You should not use the loop index as the key in your motion.div. Since the indices (and thus the keys) will always be the same, it doesn't let <AnimatePresence> track when elements have been added or removed in order to animate them.

Instead use a value like a unique id property for each element. This way React (and AnimatePresence) will know when it's rendering a different element (vs the same element with different data). This is what triggers the exit and enter animations.

Here's a more thorough explanation:
react key props and why you shouldn’t be using index