FAQ: Components Render Other Components - A Component in a Render Function

This community-built FAQ covers the “A Component in a Render Function” exercise from the lesson “Components Render Other Components”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise A Component in a Render Function

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Why is there an empty element surrounding the return statement of Profile()? I thought that is why we have parentheses.

import React from 'react';

function Picture() {
  return <img src="https://content.codecademy.com/courses/React/react_photo-octopus.jpg" />;
}

function Profile() {
  return (
    <>
      <Picture />
      <h1>Name: Octavia</h1>
      <h2>Species: Octopus</h2>
       <h2>Class: Cephalopoda</h2>
    </>
  )
}

export default Profile;

In JavaScript, we can’t return multiple values separately, but we can return them by placing them in an array or object.

function f() {
    // Attempting to return multiple values separately doesn't work as desired
    return [1], 2, "Hello"
}

function g() {
    // Returning single array works as expected
    return [[1], 2, "Hello"]
}

console.log(f()) 
// 'Hello'
console.log(g()) 
// [ [ 1 ], 2, 'Hello' ]

The parentheses after the return keyword doesn’t pack multiple values into a single object/array.

function f() {
    return ( [1], 2, "Hello" )
}

console.log(f()) 
// 'Hello'

Rather the parentheses after the return keyword are usually used for two purposes.

  • When the expression is spread over multiple lines.
function f() {
    return (
        1 + 2 +
        3 + 4 +
        5
        )
}

console.log(f()) // 15

// Without parentheses, we would have to make sure that the expression begins
// on the same line as the return keyword

// Will return 15
return 1 + 2 +
       3 + 4 + 
       5

// Will return undefined because expression is not on same line as return keyword
return 
       1 + 2 +
       3 + 4 + 
       5
  • When we want to implicitly return an object in an arrow function
// Parentheses needed for implicit return of object
const f = () => ({a: 1, b: 2})

console.log(f()) // { a: 1, b: 2 }

// If parentheses are omitted
const f = () => {a: 1, b: 2}
// Error as curly braces are interpreted as body of function instead of object

// Equivalent Explicit Return version where curly braces don't cause ambiguity
const f = () => {
    return {a: 1, b: 2}
} 

console.log(f()) // { a: 1, b: 2 }

Just as multiple return values need to be wrapped in an array or object in JavaScript, similarly in React multiple elements need to be wrapped in a single outer element.

Revisit the earlier lesson JSX Outer Elements .

…a JSX expression must have exactly one outermost element…

The parentheses after the return keyword does not constitute an outermost element.

Only one outer element is allowed, so we can wrap them in say a <div> ... </div>, but if we don’t want to add extra nodes to the DOM by creating divs, we can instead wrap the elements in a fragment.

Have a look at the documentation:

In the snippet posted by you, the short syntax (mentioned in above link) is used.

1 Like

Wonderfully explained! Thanks for taking the time to respond :slight_smile:

1 Like

This may have been covered in an earlier lesson, but why doesn’t PurchaseButton need to be in curly braces when called inside the ItemBox() function ?

function PurchaseButton() {
  return <button onClick={()=>{alert("Purchase Complete")}}>Purchase</button>
}

function ItemBox() {
  return (
    <div>
      <h1>50% Sale</h1>
      <h2>Item: Small Shirt</h2>
      <PurchaseButton />
    </div>
  );
}

Have a look at these lessons: