Return to site

#react #quiz: rendering

· frontend,react

You have written the following code but nothing is rendering. How do you fix this problem?

const Heading = () =〉 {



* Add a render function.

* Change the curly braces to parentheses or add a return statement before the h1 tag.

* Move the h1 to another component.

* Surround the h1 in a div.

#frontend #programming #rendering

When using arrow functions in React, it's important to make sure that you include a return statement to return the component's output.

Here's the corrected code:

const Heading = () =〉 {

return 〈h1〉Hello!〈/h1〉;


With this change, the component should now render as expected.

Note that you can also use implicit returns when you return a value without an explicit return statement. In this case, you could write the component as follows:

const Heading = () =〉 〈h1〉Hello!〈/h1〉;

Both returns will produce the same result, so you can choose the best option for you and your team.

More: Components and Props