Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Pass And Amend Element Props With A React Function

This is with a spread and destructuring

Code

function Box({className, ...rest}) {
    return <div className={`box ${className}`} {...rest} />
}
const element = (
    <Box className="blue" style={{fontStyle: 'italic'}}>
        This is the box
    </Box>
)

results in:

Code

<div class="box blue" style="italic">
    This is the box
</div>