Custom Component

Loading "Custom Component"
πŸ‘¨β€πŸ’Ό We want to reduce duplication here by making a custom <Box /> component that renders a div, accepts all the props and merges the given style and className props with the shared values.
I should be able to use it like so:
<Box className="box--small" style={{ backgroundColor: 'lightblue' }}>
	small lightblue box
</Box>
The box className and fontStyle: 'italic' style should be applied automatically by the <Box /> component which should then merge that default with the values that come from props.
How you go about implementing it is part of the fun (aka "learning" πŸ˜‰). You may come up with something completely different from how I do it and that's great for your learning. When you're done, these two ultimately render exactly the same thing:
// before:
<div
  className="box box--small"
  style={{fontStyle: 'italic', backgroundColor: 'lightblue'}}
>
  small lightblue box
</div>

// after:
<Box className="box--small" style={{backgroundColor: 'lightblue'}}>
  small lightblue box
</Box>
And I should be able to switch the div for a Box for the medium and large boxes as well.
πŸ’° Here's a quick tip for the TypeScript part of this. When you want to wrap an element to basically simulate that element + a little functionality (like in our case), you'll want to borrow the type definition for that element from React. Here's how you do that (for a span element rather than div):
function MySpan(props: React.ComponentProps<'span'>) {
	return <span {...props} />
}
And now you'll get type safety and autocomplete for all the HTML attributes accepted by a span element.

Access Denied

You must login or register for the workshop to view and run the tests.

Check out this video to see how the test tab works.