TypeError: transitions.map is not a function with React-Spring

Question

I'm trying to make a responsive Navbar with react and I keep getting the error "TypeError: transitions.map is not a function"

I'm following a tutorial and have used the same code so I'm not sure why I'm being thrown this error.

It's my understanding that the error is because menuTransitions isn't recognized as array but it clearly is from it being defined above.

import React, { useState } from 'react'
import { useTransition, animated } from 'react-spring'

function Navigation() {
    const [showMenu, setShowMenu] = useState(false);

    const maskTransitions = useTransition(showMenu, {
        from: { position: 'absolute', opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
    })

    const menuTransitions = useTransition(showMenu, {
        from: { opacity: 0, transform: 'translateX(-100%)' },
        enter: { opacity: 1, transform: 'translateX(0%)' },
        leave: { opacity: 0, transform: 'translateX(-100%)' },
    })
    
    
    return (
        <nav>
            <span>
                <svg onClick={() => setShowMenu(!showMenu)} xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="48" height="48" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ff105e" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <line x1="4" y1="6" x2="20" y2="6" />
                    <line x1="4" y1="12" x2="20" y2="12" />
                    <line x1="4" y1="18" x2="20" y2="18" />
                </svg>
            </span>

            

            {
                maskTransitions.map(({ item, key, props }) =>
                    item && 
                    <animated.div 
                        key={key} 
                        style={props}
                        className="fixed top-0 left-0 z-50 w-full h-full bg-blueGray-t-50"
                        onClick={() => setShowMenu(false)}
                    >
                    </animated.div>
                )
            }

            {
                menuTransitions.map(({ item, key, props }) =>
                    item && 
                    <animated.div 
                        key={key} 
                        style={props}
                        className="fixed top-0 left-0 z-50 w-4/5 h-full p-3 bg-white shadow"
                    >
                    <span>This is the menu</span>
                    </animated.div>
                )
            } 
        </nav>
    )
}

export default Navigation

Answer 1

In react-spring version 9 the syntax of transition changed. Instead of map you have to povide a render prop to the transition. So you either change back to version 8 or refactor your code to something like this:

        {
            maskTransitions((styles, item) =>
                item && 
                <animated.div 
                    style={styles}
                    className="fixed top-0 left-0 z-50 w-full h-full bg-blueGray-t-50"
                    onClick={() => setShowMenu(false)}
                >
                </animated.div>
            )
        }