Lukas Lukas - 1 month ago 4
Javascript Question

React can't render array from component

I have this component with some menu. In here there is some array iteration of menu items. I want to import this component to other

main
one but i'm receiving this error -
A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
. When i'm remove this array iteration and leave simple link everything is fine. What is wrong?

component:

const LandingMenu = (props) => {
return (
props.data.map((element, _) =>
<Link class="link" href={ element.target }>{ element.name }</Link>
)
)
};

export default LandingMenu;


import

<LandingMenu data={LANDING_CONTENT.menu} />

Answer

A React component cannot return an array... it has to return a single element.

Wrapping your output in a DIV would likely work fine:

const LandingMenu = (props) => {
    return (
        <div>
            {props.data.map((element, _) =>
                <Link class="link" href={ element.target }>{ element.name }</Link>
            )}
        </div>
    )
};

export default LandingMenu;
Comments