Mastering React Component Returns, Arrow Functions, and JSX: Rules & Corner Cases

React is flexible, but there are subtle rules around how you write components and use arrow functions inside JSX, especially when rendering lists. This article consolidates all the important rules, examples, and common pitfalls.

---

1. Returning JSX in React Components

A React component is just a JavaScript function that returns JSX.

Normal Function Component

function MyComponent() {
  return <h1>Hello React!</h1>;
}

✅ Key Rule:

• A function must return JSX; otherwise, nothing renders.

• If returning multiple elements, wrap them in a single root element (<div> or React Fragment <>).

function MyComponent() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome to React</p>
    </>
  );
}

---

2. Arrow Function Components

Arrow functions are widely used in modern React. There are two main forms:

2.1 Implicit Return (())

Use when your component is just returning JSX:

const MyComponent = () => (
  <div>
    <h1>Hello</h1>
    <p>Just JSX, no extra logic</p>
  </div>
);

✅ Advantages:

• Cleaner, shorter syntax

• No need for return keyword

• Perfect for render-only components

---

2.2 Explicit Return ({ return (...) })

Use when your component has extra logic before returning JSX:

const MyComponent = () => {
  const message = "Hello from logic!";
  console.log(message);

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
};

✅ Key Points:

• Curly braces {} start a function body, so JSX is not automatically returned.

• You must include return.

---

Rule of Thumb

---

3. Using .map() to Render Lists

When rendering lists in React, you usually use .map(). The arrow function inside .map() follows the same rules as above.

3.1 Implicit Return inside .map()

{pets.map(pet => (
  <div key={pet.name}>
    <h2>{pet.name}</h2>
    <p>Age: {pet.age}</p>
  </div>
))}

✅ Notes:

• Parentheses () → implicit return

• Works even if multiple JSX elements are grouped in a single parent

---

3.2 Explicit Return inside .map()

{pets.map(pet => {
  console.log(pet);
  return (
    <div key={pet.name}>
      <h2>{pet.name}</h2>
      <p>Age: {pet.age}</p>
    </div>
  );
})}

✅ Notes:

• Curly braces {} → function body

• Must use return to return JSX

• Use when adding logic (filtering, logging, calculations)

---

3.3 Common Mistake: Forgetting return

{pets.map(pet => {
  <div>{pet.name}</div>;  // ❌ JSX not returned
})}

• .map() produces an array of undefined → nothing renders

• Always use return with {} or use () for implicit return

---

4. Top-Level vs Inside .map()

• Top-level component: must always return JSX, usually with return (or implicit if arrow with ()).

• Inside .map(): can use () for implicit return; {} needs explicit return.

---

5. Returning Multiple Values

JavaScript functions can only return one thing, but that “one thing” can be:

• An object: return {name: "Buddy", age: 3};

• An array: return [1, 2, 3];

• JSX element (React always expects one root element):

return (
  <div>
    <h1>{pet.name}</h1>
    <p>{pet.age}</p>
  </div>
);

• Multiple JSX elements must be wrapped in a parent element (<div> or <>).

---

6. React Fragments vs <div>

• Use <div> if you need a real container (for styling or flex layout).

• Use <> (Fragment) if you just need one root element without adding a DOM node.

return (
  <>
    <h1>{pet.name}</h1>
    <p>{pet.age}</p>
  </>
);

---

7. Combining Extra Logic with JSX

Example: filtering pets under 5 years old and rendering:

const Pets = () => {
  const youngPets = pets.filter(p => p.age < 5);
  console.log("Young pets:", youngPets);

  return (
    <div>
      <h1>Young Pets</h1>
      {youngPets.map(pet => (
        <div key={pet.name}>
          <h2>{pet.name}</h2>
          <p>{pet.age}</p>
        </div>
      ))}
    </div>
  );
};

---

8. Key Takeaways

1. Top-level React component → always return JSX.

2. Arrow functions inside JSX:

   • () → implicit return

   • {} → explicit return

3. .map() rendering → same rules as arrow functions.

4. Always wrap multiple JSX elements in a parent element.

5. Fragments (<>) avoid extra <div> clutter.

6. Objects or arrays are the way to “return multiple values” in JS.

7. Keys in lists → always provide key={unique} when mapping.