Return one element — practice exercise

What you'll be asked to do

1. 1.Return one elementexercise · easy · 10 min

   Wrap a heading and a paragraph in a single div.

   Passes when: #root should show Title Body.

2. 2.Use a fragmentexercise · easy · 10 min · practice plan

   Return two elements without adding a wrapper element.

   Passes when: #root should show one two.

3. 3.Return nullexercise · easy · 10 min · practice plan

   Render nothing when the hide prop is true.

   Passes when: #root should show visible.

4. 4.Compose three componentsexercise · easy · 10 min · practice plan

   Build a row from an icon, a name and a role component.

   Passes when: #root should show star Ada Engineer.

5. 5.Arrow function componentexercise · medium · 10 min · practice plan

   Write the component as an arrow function instead of a declaration.

   Passes when: #root should show arrow works.

6. 6.Fix the two root elementsbug fix · easy · 8 min

   A function cannot return two values; the siblings need a parent.

   Passes when: #root should show both Title and Body.

7. 7.Fix the return on its own linebug fix · easy · 8 min · practice plan

   A line break after return ends the statement, so the component returns undefined.

   Passes when: #root should show renders fine.

8. 8.Fix the unclosed tagbug fix · easy · 8 min · practice plan

   Every JSX tag must close, including void elements.

   Passes when: #root should show both lines.

9. 9.Fix the object dumped as JSONbug fix · medium · 8 min · practice plan

   Stringifying the whole object shows its braces and quotes; read the field you meant.

   Passes when: #root should show Name: Ada.

10. 10.Fix the missing returnbug fix · easy · 8 min · practice plan

    A component with no return renders nothing at all.

    Passes when: #root should show arrow works.

Between them these tasks cover Naming, Single root and Fragments.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.