React: The best way to pass html attributes as props

Question

For instance, I want to behave a Button as a normal button and enhance the component.

<Button type="submit" className="btn">Click me!</Button>

leads to an html element:

<button type="submit" className="btn">Click me!</button>

Is there a way to write the Button component like this?:

const Button = ({children, ...htmlAttributesOnly}) => (
    <button {...htmlAttributesOnly}>{children}</button>
)

The idea behind is to make a component as flexible as possible by giving access to all of its html elements' attributes. Or do I have to repeat every html element attribute?

Answer 1

You were really close to an answer, just wrap your props in curly braces:

const Button = ({ children, ...rest }) => (
    <button {...rest}>{children}</button>
)