React can't render array from component

Question

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} />

Tack on join("") ?

adeneo
– adeneo

2016-10-25 20:58:39 +00:00
Commented Oct 25, 2016 at 20:58 — adeneo
– adeneo, Commented Oct 25, 2016 at 20:58

arthurakay · Accepted Answer · 2016-10-25 21:04:31Z

4

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;

answered Oct 25, 2016 at 21:04

arthurakay

5,6498 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

narvoxx · Accepted Answer · 2016-10-25 21:14:43Z

2

Components need to be wrapped in a root element. Your notation would be fine if it was a helper function in a different class.

So your LandingMenu needs to look like this:

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

an alternative solution would be to have a render helper function inside whatever component is currently using LandingMenu

//SomeComponent
renderHelperFunction(data){
    return (
        {data.map((element, _) =>
            <Link class="link" href={ element.target }>{ element.name }</Link>}
    )
)

render(){
    return (...

          {this.renderHelperFunction(this.props.data)}

    ...)
}

edited Oct 25, 2016 at 21:14

answered Oct 25, 2016 at 21:09

narvoxx

8076 silver badges13 bronze badges

Collectives™ on Stack Overflow

React can't render array from component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related