CODEWITHSUNDEEP
javascriptreactjsjsx
Eduard
Eduard

Reputation: 9165

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

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.

Upvotes: 2

Views: 3659

Answers (2)

cauchy
cauchy

Reputation: 1123

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

Upvotes: 1

Eduard
Eduard

Reputation: 9165

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

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

Upvotes: 5

Related Questions