Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
React Component Design
const Button = ({ tagName: TagName = 'button', }) => <TagName className="button" {} />;
const App = () => {
return (
<Button onClick={() => console.log('clicked')}>renders HTMLButtonElement (default)</Button>
<Button tagName="a" href="">renders HTMLAnchorElement (for functional purposes)</Button>
<Button tagName="h3">renders HTMLHeadingElement (for weird SEO purposes)</Button>

This comment has been minimized.

Copy link
Owner Author

@richardscarrott richardscarrott commented Mar 8, 2018

It's key to understand that a Button component is a Button component purely because it looks a certain way, not because of the markup it renders. i.e. if it looks different, use a different component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment