Pass a label prop and render it.
Acceptance criteria
- 1.#root should show Save.
React Tutorial · Components and Props
These 10 tasks go with the Passing Props 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: “Props are the arguments of a component. A parent passes them down; the child reads them and never writes to them.” Read the chapter.
1.Pass a string propexercise · easy · 10 min
Pass a label prop and render it.
Passes when: #root should show Save.
2.Pass a number propexercise · easy · 10 min · practice plan
Numbers need braces, not quotes.
Passes when: #root should show count is 7.
3.Pass two propsexercise · easy · 10 min · practice plan
Render a person's name and role from two props.
Passes when: #root should show Ada is an engineer.
4.Give a prop a defaultexercise · easy · 10 min · practice plan
Use a default so the component works when the prop is omitted.
Passes when: #root should show Guest.
5.Pass an object propexercise · medium · 10 min · practice plan
Pass a whole object and read two fields from it.
Passes when: #root should show Ada, London.
6.Fix the prop read without destructuringbug fix · easy · 8 min
The parameter is the whole props object, so the field must be read from it.
Passes when: #root should show Save.
7.Fix the number passed as a stringbug fix · easy · 8 min · practice plan
A quoted number is text, so the arithmetic concatenates.
Passes when: #root should show next is 8.
8.Fix the misspelled prop namebug fix · easy · 8 min · practice plan
The name sent and the name read must match exactly.
Passes when: #root should show Ada.
9.Fix the default that never appliesbug fix · medium · 8 min · practice plan
A default only fills in for undefined, so an empty string wins.
Passes when: #root should show Guest.
10.Fix the prop it tries to reassignbug fix · easy · 8 min · practice plan
Props are read-only, so build a new value from the prop instead.
Passes when: #root should show Welcome, Ada.
Between them these tasks cover Props, Destructuring and Defaults.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.