DEV Community

Discussion on: Tips on Creating Reusable Components

Collapse
loliver profile image
Oliver Gassman

You can enforce the Keep It Simple part by using pure functional components rather than classes, this stops lifecycle hooks and the like from being added absent-mindedly.

const IconAdder = ({ tag, onClick, children, ...rest }) => {
    const Tag = tag

    return (
        <Tag onClick={onClick} {...rest}>
            <Icon />
            {" "}
            {children}
        </Tag>
    )
}
Collapse
haraldson profile image
Hein Haraldson Berg • Edited on

One could even go as far as doing

const IconAdder = ({ tag: Tag = 'a', children, ...props }) => (
    <Tag {...props}>
        <Icon />
        {" "}
        {children}
    </Tag>
)