Show Welcome back when signed in, Please sign in otherwise.
Acceptance criteria
- 1.#value should show Welcome back.
React Tutorial · Conditional Rendering
These 10 tasks go with the Conditional Rendering chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “There is no if inside JSX, because JSX takes expressions. Every technique here is a way of producing a value that is either some UI or nothing.” .
1.Choose with a ternaryexercise · easy · 10 min
Show Welcome back when signed in, Please sign in otherwise.
Passes when: #value should show Welcome back.
2.Render only when trueexercise · easy · 10 min · practice plan
Show a badge only when there are unread messages.
Passes when: #root should show 3 unread.
3.Return earlyexercise · easy · 10 min · practice plan
Return a locked message before rendering the rest.
Passes when: #value should show Locked.
4.Pick between three statesexercise · easy · 10 min · practice plan
Show loading, failed or ready from one status value.
Passes when: #value should show ready.
5.Toggle a sectionexercise · medium · 10 min · practice plan
Show the panel only after the button is pressed.
Passes when: #value should show panel open.
6.Fix the branches the wrong way roundbug fix · easy · 8 min
The signed-in and signed-out messages are swapped.
Passes when: #value should show Welcome back.
7.Fix the leaked zerobug fix · medium · 8 min · practice plan
A number on the left of && is rendered when it is zero.
Passes when: #value should show no messages.
8.Fix the guard that never runsbug fix · easy · 8 min · practice plan
The condition is inverted, so the locked page is never shown.
Passes when: #value should show Locked.
9.Fix the assignment in the conditionbug fix · easy · 8 min · practice plan
A single equals assigns instead of comparing.
Passes when: #value should show ready.
10.Fix the toggle stuck shutbug fix · easy · 8 min · practice plan
The button sets the same value it already has.
Passes when: Clicking should show panel open.
Between them these tasks cover Ternaries, Logical and and Early return.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.