React Conditional Rendering
Learn about conditional states for asynchronous data.
We'll cover the following
Handling asynchronous data in React leaves us with conditional states: with data and without data. This case is already covered, though, because our initial state is an empty list rather than null
. If it was null, we’d have to handle this issue in our JSX. However, since it’s []
, we filter()
over an empty array for the search feature, which leaves us with an empty array. This leads to rendering nothing in the List component’s map()
function.
In a real-world application, there are more than two conditional states for asynchronous data, though. Consider showing users a loading indicator when data loading is delayed:
Get hands-on with 1200+ tech skills courses.