JSX syntax rules in React - Mini Project: Build & Apply

JSX Syntax Rules in React

📖 Scenario: You are building a simple React component that displays a greeting message and a list of your favorite fruits. You will learn how to write JSX correctly, including how to use expressions, attributes, and proper syntax.

🎯 Goal: Create a React functional component named FavoriteFruits that renders a heading and an unordered list of fruits using correct JSX syntax.

📋 What You'll Learn

Create a functional component named FavoriteFruits

Use JSX to render a <div> container

Inside the container, add a <h1> with the text 'My Favorite Fruits'

Create an array of fruits inside the component

Render the fruits as an unordered list (<ul>) with each fruit as a list item (<li>)

Use correct JSX syntax for expressions and attributes

💡 Why This Matters

🌍 Real World

React components with JSX are the building blocks of modern web apps. Knowing JSX syntax helps you create interactive and dynamic user interfaces.

💼 Career

React is widely used in web development jobs. Understanding JSX syntax rules is essential for writing clean, maintainable React code.

1

Create the React functional component and fruit array

Write a React functional component named FavoriteFruits. Inside it, create a constant array called fruits with these exact strings: 'Apple', 'Banana', 'Cherry'.

React

function FavoriteFruits() {
  // Create the fruits array here
  // Your code here
}

Hint

Remember to use function FavoriteFruits() to define the component and const fruits = [...] to create the array.

2

Add JSX container and heading

Inside the FavoriteFruits component, return a JSX <div> element. Inside this <div>, add an <h1> element with the exact text My Favorite Fruits.

React

function FavoriteFruits() {
  const fruits = ['Apple', 'Banana', 'Cherry'];
  
  return (
    
      {/* Add h1 heading here */}
      {/* Your code here */}
    
  );
}

Hint

Use parentheses ( ) to wrap the JSX return. The <h1> should be inside the <div>.

3

Render the fruits array as a list

Inside the returned <div>, below the <h1>, add an unordered list <ul>. Use fruits.map with parameters fruit and index to create a list item <li> for each fruit. Use the key attribute set to index on each <li>. The content of each <li> should be the fruit string.

React

function FavoriteFruits() {
  const fruits = ['Apple', 'Banana', 'Cherry'];
  
  return (
    
      My Favorite Fruits
      
        {/* Use fruits.map to create list items here */}
        {/* Your code here */}
      
    
  );
}

Hint

Remember to wrap the fruits.map expression in curly braces { } inside JSX.

4

Export the component as default

Add a line at the end of the file to export the FavoriteFruits component as the default export using export default FavoriteFruits;.

React

function FavoriteFruits() {
  const fruits = ['Apple', 'Banana', 'Cherry'];
  
  return (
    
      My Favorite Fruits
      
        {fruits.map((fruit, index) => (
          {fruit}
        ))}
      
    
  );
}

// Export the component here
// Your code here

Hint

Use the exact syntax export default FavoriteFruits; to export the component.

Practice

1. Which of the following is correct JSX syntax for embedding a JavaScript expression inside HTML?

easy

A. <h1>Hello, {name}!</h1>

B. <h1>Hello, (name)!</h1>

C. <h1>Hello, $name!</h1>

D. <h1>Hello, &{name}!</h1>

Solution

1. Step 1: Understand JSX expression embedding

   JSX uses curly braces {} to embed JavaScript expressions inside HTML-like code.

2. Step 2: Check each option for correct syntax

   <h1>Hello, {name}!</h1> correctly uses curly braces around the variable name. The other options use invalid syntax for embedding expressions.

3. Final Answer:

   <h1>Hello, {name}!</h1> -> Option A

4. Quick Check:

   Curly braces for JS expressions = <h1>Hello, {name}!</h1> [OK]

Hint: Use curly braces {} to embed JavaScript in JSX [OK]

Common Mistakes:

• Using parentheses () instead of curly braces
• Using $ sign like template strings inside JSX
• Adding extra symbols like & before curly braces

2. Which JSX snippet is syntactically correct?

easy

A. <p>Hello<p>

B. <div><img src='logo.png'></div>

C. <input type='text' />

D. <br>

Solution

1. Step 1: Check self-closing tags in JSX

   In JSX, tags like input, img, and br must be self-closed with a slash /.

2. Step 2: Validate each option

   <input type='text' /> correctly self-closes input. <div><img src='logo.png'></div> misses self-closing on img. <p>Hello<p> has an unclosed p tag. <br> misses self-closing on br.

3. Final Answer:

   <input type='text' /> -> Option C

4. Quick Check:

   Self-close void tags with / = <input type='text' /> [OK]

Hint: Always self-close void tags like in JSX [OK]

Common Mistakes:

• Forgetting the slash on self-closing tags
• Leaving tags unclosed
• Using HTML void tags without self-closing

3. What will this JSX code render?

const name = 'Alice';
const element = <div>Hello, {name.toUpperCase()}!</div>;

medium

A. <div>Hello, Alice!</div>

B. <div>Hello, ALICE!</div>

C. <div>Hello, {name.toUpperCase()}!</div>

D. SyntaxError

Solution

1. Step 1: Evaluate the JavaScript expression inside JSX

   The expression {name.toUpperCase()} calls the toUpperCase() method on the string 'Alice', resulting in 'ALICE'.

2. Step 2: Understand JSX rendering

   JSX replaces the expression with its evaluated result, so the rendered output is <div>Hello, ALICE!</div>.

3. Final Answer:

   <div>Hello, ALICE!</div> -> Option B

4. Quick Check:

   JS expression evaluated = <div>Hello, ALICE!</div> [OK]

Hint: JSX renders evaluated expressions, not raw code [OK]

Common Mistakes:

• Expecting JSX to show raw JavaScript code
• Confusing string methods inside JSX
• Thinking JSX does not evaluate expressions

4. Identify the error in this JSX code:

const element = <div>
  <p>Welcome</p>
  <p>User</p>
</div>;

const wrongElement = <p>Hello</p>
<p>World</p>;

medium

A. JSX expressions cannot contain multiple <p> tags

B. JSX requires all tags to be self-closing

C. JSX does not allow text inside <p> tags

D. JSX must have only one parent element per block

Solution

1. Step 1: Analyze the JSX structure

   The first element uses a single parent div wrapping two p tags, which is correct. The second snippet has two sibling p tags without a parent wrapper.

2. Step 2: Recall JSX rules about parent elements

   JSX requires one parent element per block. Multiple sibling elements must be wrapped in a single parent or a fragment.

3. Final Answer:

   JSX must have only one parent element per block -> Option D

4. Quick Check:

   One parent element rule = JSX must have only one parent element per block [OK]

Hint: Wrap multiple JSX elements in one parent tag [OK]

Common Mistakes:

• Leaving sibling JSX elements unwrapped
• Thinking multiple root elements are allowed
• Confusing self-closing tags with parent wrapping

5. You want to render a list of names inside a JSX component. Which snippet correctly uses JSX syntax to do this?

const names = ['Anna', 'Bob', 'Cara'];

A) <ul>{names.map(name => <li>{name}</li>)}</ul>

B) <ul>{names.forEach(name => <li>{name}</li>)}</ul>

C) <ul>{names.map(name => <li>name</li>)}</ul>

D) <ul>{names.map(name => <li>{name.toUpperCase()}</li>)}</ul>

hard

A. Correctly maps names to list items with JSX expressions

B. Uses forEach which returns undefined, so no list items render

C. Does not embed the variable, so 'name' is rendered literally

D. Maps names but transforms them to uppercase before rendering

Solution

1. Step 1: Understand how to render lists in JSX

   Use map to transform array items into JSX elements. Each item must be embedded inside curly braces.

2. Step 2: Evaluate each option

   The snippet {names.map(name => <li>{name}</li>)} correctly uses map and embeds {name}. The forEach snippet returns undefined, so no list items render. The snippet <li>name</li> renders the literal string 'name' because it lacks curly braces. The toUpperCase() snippet uses valid JSX syntax but transforms names to uppercase, which is not the original list.

3. Final Answer:

   Correctly maps names to list items with JSX expressions -> Option A

4. Quick Check:

   Use map with curly braces for list rendering = Correctly maps names to list items with JSX expressions [OK]

Hint: Use map with curly braces to render lists in JSX [OK]

Common Mistakes:

• Using forEach instead of map for rendering
• Forgetting curly braces around variables
• Rendering variable names as plain text