Почему компонент равен undefined?

Question

[cedFlame]

Есть навигационная панель, я хочу чтобы при клике на каждый пункт в App передавался соответствующий компонент. state (булевая переменная) передаётся, а вот компонент - нет, он всегда равен undefiend.

App

function App() {

    const [data, setData] = useState({state: true, panel: <></>})
    const handleData = (state, panel) => {
        setData(state, panel)
    }
    const component = useRef();
    const slider = useRef();

    useLayoutEffect(() => {
        let ctx = gsap.context(() => {
            let panels = gsap.utils.toArray(".panel");
            gsap.to(panels, {
                xPercent: -100 * (panels.length - 1),
                ease: "none",
                scrollTrigger: {
                    trigger: slider.current,
                    pin: true,
                    scrub: 0.5,
                    snap: 0 / (panels.length - 1),
                    end: () => "+=" + slider.current.offsetWidth
                }
            });
        }, component);
        return () => ctx.revert();
    })

    return (
        <>
            {
                !data.state ?
                    (<>
                        <div style={{display: 'none'}} ref={component}>
                            <div ref={slider}></div>
                        </div>
                        <div><Header handleData={handleData} position='absolute' /></div>
                        <div>{data.panel}</div>
                    </>
                    )
                    :
                    (<div className="App" ref={component}>
                        <div><Header handleData={handleData} position={'fixed'} /></div>
                        <div ref={slider} className="container">
                            <div className="panel"><Main/></div>
                            <div className="panel"><About/></div>
                            <div className="panel"><Works/></div>
                            <div className="panel"><Services/></div>
                            <div className="panel"><Contacts/></div>
                        </div>
                    </div>)
                }

        </>
    );
}

Header

export const Header = (props) => {
    const handleData = props.handleData
    const position = props.position

    return (
        <>
            <div style={{position: position}} className={classes.wrapper}>
                <div className={classes.label}>
                </div>
                <div className={classes.navBar}>
                    <NavBar handleData={handleData} />
                </div>
                <div className={classes.socialMedia}>

                </div>
            </div>
        </>
    );
}

NavBar

const menuData = [{
    name: 'Main', scroll: function () {
        scroll.scrollToTop()
    },
    panel: <Main/>
},
    {
        name: 'About', scroll: function () {
            scroll.scrollTo(window.innerWidth)
        },
        panel: <About/>
    },
    {
        name: 'Works', scroll: function () {
            scroll.scrollTo(window.innerWidth * 2)
        },
        panel: <Works/>
    },
    {
        name: 'Services, scroll: function () {
            scroll.scrollTo(window.innerWidth * 3)
        },
        panel: <Services/>
    },
    {
        name: 'Contacts', scroll: function () {
            scroll.scrollToBottom()
        },
        panel: <Contacts/>
    }]

export const NavBar = (props) => {
    const [activeIndex, setActive] = useState(0)
    const Scroll = require('react-scroll');
    const scroll = Scroll.animateScroll;

    const handleData = props.handleData

    return (
        <>
            <div className={classes.bar}>
                {
                    menuData.map((item, index) => (
                        <MenuItem
                            key={item}
                            item={item}
                            isSelected={activeIndex === index}
                            handleClick={() => {
                                setActive(index)
                                handleData(false, item.panel)
                            }}
                        />
                    ))
                }
            </div>
        </>
    );
}

Answer 1

[Алексей]

У вас в состоянии data объект, а в setData вы передаете 2 отдельных параметра из которых используется только первый как аргумент.
поменяйте setData на:
setData({state, panel})
должно заработать