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

<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 ponent like this?:

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

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

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

<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 ponent like this?:

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

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

• javascript
• reactjs

• 1 When you tried it did it work? – Andy Commented Oct 12, 2021 at 15:02

2 Answers 2

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

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

You can create a Button ponent like this.

export default function Button(props) {
  return <button {...props}>{props.children}</button>;
}

Later you can use it like this.

  <Button onClick={()=>alert("hello")} style={{padding:10,border:'none',backgroundColor:'white'}} >Click Me</Button>