try to keep state as simple as possible, and toggle styles/classnames based on state

[rooberrydev]

tfb-bonf/src/components/Sidebar/Sidebar.jsx

Lines 13 to 15 in 85b7aa3

	const [sidebarWidth, setSidebarWidth] = React.useState('13rem');
	const collapse = () => setSidebarWidth('0');
	const unfurl = () => setSidebarWidth('13rem');

Setting a width value with state isn't ideal, if you have a more complex difference in the UI, it can be quite difficult to store all that information in state.

At a basic level, this state value tracks whether the sidebar is open, or not.

So calling it isOpen or something similar, and having a true/false value is recommended.

const [isOpen,setIsOpen] = React.useState(true)
 const collapse = () => setIsOpen(false); 
 const unfurl = () => setIsOpen(true)

Now you can conditionally change classNames or inline styles depending on this state value.

<Nav style={{ width: isOpen ? '13rem' : '0' }}></Nav>;

It seems like more effort in this example since only width is changing, but if we have a more complex UI change it's not ideal to store the css values directly in state. Instead store a boolean describing the state, and set classNames or styles depending on that boolean.

[rooberrydev]

This is actually insignificant here since only width is changing. But I thought I'd mention it anyway, good to practice common react patterns!