Return multiple Components depending on array prop

Question

Trying to return multiple action buttons from a ActionButtons component:

export default class ActionButtons extends Component {
render() {
    console.log(this.props.actions)
    return(
    this.props.actions.map((field, i) => {
        <div key={field.href}>
            <DefaultButton
                key={field.href}
                text={field.label}
                href={field.href}
            />
        </div>
    })
    )
    }
}

Calling it from another component with the following code:

      const actions = [
            {"label": "Go Back", "href":"www.google.com"}
        ];
<ActionButtons actions={actions} />

On the ActionButtons component if i return just one single button without the map then it works. What am i missing ?

Dupocas · Accepted Answer · 2019-11-05 14:13:41Z

You need to explicitly return your jsx from inside map

//inside render
return this.props.actions.map((field, i) => {
    return (
        <div key={field.href}>
            <DefaultButton
                key={field.href}
                text={field.label}
                href={field.href}
            />
        </div>
    )
}

When using a jsx block () (the example above returns an array which is also valid) you also need to declare your operations inside curly brackets.

export default class ActionButtons extends Component {
    render() {
        console.log(this.props.actions)
        return (
            <>
            {
                this.props.actions.map((field, i) => {
                    return (
                        <div key={field.href}>
                            <DefaultButton
                                key={field.href}
                                text={field.label}
                                href={field.href}
                            />
                        </div>
                    )
                })
            }
            </>
        )
    }
}

Collectives™ on Stack Overflow

Return multiple Components depending on array prop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest