javascript - React is rendering [Object object] instead of JSX elements inside the array - Stack Overflow

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.

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.

• javascript
• reactjs
• jsx

Share Improve this question Follow edited Jan 25, 2018 at 17:38 Eduard asked Jan 25, 2018 at 17:37 EduardEduard 9,2151111 gold badges4747 silver badges7272 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>
    )
}

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