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?
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 component 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>