So after seeing your beautiful contact list, a few of your billionaire friends were pretty impressed, and sent you a photo to add to the list.
But not all of them. Some friends are a little more privacy conscious.
This presents a problem: how would you add an
<img> tag to some contacts, but not to others?
Just as you’ll use
for loops to create lists, you can use
if statements to decide what to render!
For example, here’s how you’d use
if to render a greeting appropriate to the current hour:
Now that you know how to handle conditional rendering, it’s time to put your knowledge to practice!
Your task is to render an
<img> tag within the
Contact-avatar div for each billionaire that has a
photoURL defined — without rendering unnecessary
<img> tags for other contacts.
The example’s styles will display an
<img> tag over the top of the initials. This ensures that on a slow connection, initials will be displayed until the image can be loaded. As such, in the case that
photoURL is defined, you’ll want to render both the initials and an
<img> tag. As a hint, remember that you can pass multiple children to
createElement() by passing 4th and subsequent arguments.
If you’ve given the exercise a decent crack, and would like to check your answer against mine, then go ahead! Just click the Solution button at the bottom of the editor.
And once you’re happy that you’ve got conditional rendering with
if figured out, I’ll let you in on a little secret…
There’s an easier way of doing this.
Way back when I first introduced
React.createElement(), I mentioned three types that you could pass in as
In fact, there are another three that I missed:
So what happens when you render
false? Let’s find out with an experiment!
Even though the above example specifies
false as children, the only things that are rendered are the letters “hi!”. You can right click and “Inspect” the red squre to confirm for yourself.
Keeping in mind that the result of
undefined && anything is always
undefined, you now have a neat trick for conditional rendering:
// This will only hold an element if `condition` is true. let element = condition && createElement( // ... )
Your final task for this lesson is to simplify the below contact list with this trick. You should be able to reduce the length of the code by 10 lines or so.
Once you’re happy with the result, click through to the next lesson!