Using props in JSX in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this React component render?

Consider this React component that uses props to display a greeting message. What will be the output when rendered with ?

React

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

A <h1>Hello, props.name!</h1>

B <h1>Hello, {name}!</h1>

C <h1>Hello, !</h1>

D <h1>Hello, Alice!</h1>

💡 Hint

Remember that props are accessed as properties of the props object inside JSX using curly braces.

The component uses props.name inside curly braces to insert the value of the name prop. So it renders 'Hello, Alice!'. Other options either treat props as plain text or miss the value.

❓ state_output

intermediate

What is the output after clicking the button once?

This React component uses props and state. What will be the displayed text after clicking the button once?

React

import React, { useState } from 'react';

function Counter({ start }) {
  const [count, setCount] = useState(start);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Rendered as <Counter start={5} />

A Count: 1

B Count: 6

C Count: 5

D Count: 0

💡 Hint

The initial state is set from the start prop. Clicking the button increases count by 1.

The initial count is 5 from the start prop. Clicking the button once calls setCount(count + 1), so count becomes 6 and displays 'Count: 6'.

📝 Syntax

advanced

Which option correctly passes multiple props to a component?

You want to pass two props, title and subtitle, to a React component called Header. Which JSX syntax is correct?

A <Header title="Welcome" subtitle="Home Page" />

B <Header title="Welcome", subtitle="Home Page" />

C <Header title={"Welcome"} subtitle={Home Page} />

D <Header title='Welcome' subtitle='Home Page'>

💡 Hint

Props in JSX are passed like HTML attributes without commas and with quotes or curly braces.

Option A correctly passes two props without commas and with quotes. Option A has a comma which is invalid syntax. Option A misses quotes around subtitle value. Option A is missing the closing slash or closing tag.

🔧 Debug

advanced

Why does this component fail to display the prop value?

This React component tries to display a prop but shows nothing. What is the cause?

React

function ShowMessage(props) {
  return <p>Message: props.text</p>;
}

// Rendered as <ShowMessage text="Hello!" />

A The prop name 'text' is incorrect; it should be 'message'.

B The component is missing a return statement.

C The prop is not inside curly braces, so it is treated as plain text.

D The component must use state to display props.

💡 Hint

In JSX, dynamic values must be inside curly braces to be evaluated.

JSX treats anything outside curly braces as plain text. So 'props.text' is shown literally, not the prop value. Wrapping it in curly braces fixes this.

🧠 Conceptual

expert

What happens if you modify props inside a React component?

Consider this code inside a React functional component: props.name = "Changed"; What will happen when you try to modify props like this?

A React will throw an error because props are read-only and cannot be changed.

B The component will update and re-render with the new prop value.

C The prop value changes only inside the component but does not affect the parent.

D Modifying props will cause the component to enter an infinite render loop.

💡 Hint

Props are meant to be read-only inputs to components.

Props are immutable in React. Trying to assign a new value to props properties causes an error or unexpected behavior. State or context should be used for mutable data.