Posts

Some components don’t know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic “boxes”. For such components, we can use the special children prop to pass children elements directly into their output: function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> ); } This lets other components pass arbitrary children to them by nesting the JSX: function WelcomeDialog() { return ( <FancyBorder color="blue"> <h1 className="Dialog-title"> Welcome </h1> <p className="Dialog-message"> Thank you for visiting our spacecraft!...

When the new state is calculated using the previous state, you can update the state with a callback: const [state, setState] = useState(initialState); // changes state to `newState` and triggers re-rendering setState(prevState => nextState); // after re-render `state` becomes `newState` Some more examples: // Toggle a boolean const [toggled, setToggled] = useState(false); setToggled(toggled => !toggled); // Increase a counter const [count, setCount] = useState(0); setCount(count => count + 1); // Add an item to array const [items, setItems] = useState([]); setItems(items => [....

Naming things (= variables, properties, functions, methods, classes) correctly and in an understandable way is an extremely important part of writing clean code. Be Descriptive Names have one simple purpose: They should describe what’s stored in a variable or property or what a function or method does. Or what kind of object will be created when instantiating a class. If you keep that in mind, coming up with good names should actually be straightforward - though coming up with the best name for a given variable/ property/ function/ … will of course still require some practice and often multiple iterations....

An important aspect of testing is to achieve good code coverage. This means, that you want to write tests for the majority of your code (both code files and line of code). There are tools that help you measure your code coverage - Testing library, Vitest comes with a built-in functionality: https://vitest.dev/guide/features.html#coverage It is worth noting though, that the goal is not necessarily 100% coverage. There always can be some code that doesn’t need any tests (e....

The unary plus (+) operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn’t already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values true, false, and null....