javascript - 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.

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.

Share Improve this question edited Jan 25, 2018 at 17:38 asked Jan 25, 2018 at 17:37 Eduard 9,21511 gold badges47 silver badges72 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>
    )
}

Programmer puzzle solving

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

2 Answers 2

Articles related to this article

comment list (0)