JSX Rendering Tricks
Useful ways to control how React templates or components are rendered
map is one of the most common and useful ways to generate a list of elements in a component. The logic can be embedded in the JSX with an arrow function.
This can even be stacked with other methods, like
filter and many other JS array methods.
If part of, or the entirety of, a component is conditional, you can cancel the rending just be returning
null at any point.
nullbefore any JSX is returned cancels the entire component. It should be in a conditional, such as returning
nullis an array to be looped through is empty.
nullinside the returned JSX cancels out all the JSX in the contained bit of JS where it’s called.
If it’s only a one-way conditional, you can adjust the operator like this so it’s simpler.