React is rendering [Object object] instead of JSX elements inside the array

Question

I have this array of buttons in my React application:

const buttons = [    
<Button label='Close' onClick={props.handleClose} />,
<Button label='Save' onClick={props.handleSubmit} />,
<Button label='Reset' onClick={props.handleReset} />
]

But when I render them:

render() {
    return (
        <div className='buttons'>{buttons.join()}</div>
    )
}

I get:

 Object object Object object Object object

And I want to get those elements.

Eduard · Accepted Answer · 2018-01-25 17:38:36Z

5

There is no need to use .join(). It's enough to just pass an array like that:

render() {
    return (
        <div className='buttons'>{buttons}</div>
    )
}

answered Jan 25, 2018 at 17:38

Eduard

9,34511 gold badges49 silver badges73 bronze badges

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

Comments

cauchy · Accepted Answer · 2018-01-25 17:41:53Z

1

Why need to use join. There is no need.

const buttons = [    
<Button label='Close' onClick={props.handleClose} />,
<Button label='Save' onClick={props.handleSubmit} />,
<Button label='Reset' onClick={props.handleReset} />
]
render() {
    return (
        <div className='buttons'>{buttons}</div>
    )
}

answered Jan 25, 2018 at 17:41

cauchy

1,1431 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

React is rendering [Object object] instead of JSX elements inside the array

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