Props as read-only data in React - Mini Project: Build & Apply

Props as read-only data

📖 Scenario: You are building a simple React app that shows a list of fruits with their colors. The fruit data is passed from a parent component to a child component as props.Props are like gifts you receive from your parents. You can look at them and use them, but you should never change them. This keeps your app predictable and easy to understand.

🎯 Goal: Create a React app with a parent component FruitList that passes a list of fruits as props to a child component FruitItem. The child component should display the fruit name and color without changing the props.

📋 What You'll Learn

Create a fruits array with objects containing name and color properties

Create a FruitList component that passes each fruit object as a prop named fruit to FruitItem

Create a FruitItem component that receives the fruit prop and displays its name and color

Do not modify the fruit prop inside FruitItem

💡 Why This Matters

🌍 Real World

Passing data as props is how React apps share information between components, like showing user profiles or product details.

💼 Career

Understanding props as read-only data is fundamental for React developers to build maintainable and bug-free user interfaces.

1

Create the fruits data array

Create a constant array called fruits with these exact objects: { name: 'Apple', color: 'Red' }, { name: 'Banana', color: 'Yellow' }, and { name: 'Grape', color: 'Purple' }.

React

# Create the fruits array with the given objects
# Your code here

Hint

Use const fruits = [ ... ] with objects inside the array.

2

Create the FruitList component

Create a React functional component called FruitList that returns a <div>. Inside the <div>, use fruits.map with fruit as the iterator variable to render a FruitItem component for each fruit. Pass the fruit object as a prop named fruit to FruitItem. Use fruit.name as the key prop.

React

const fruits = [
  { name: 'Apple', color: 'Red' },
  { name: 'Banana', color: 'Yellow' },
  { name: 'Grape', color: 'Purple' }
];

// Create FruitList component here
# Your code here

Hint

Use fruits.map(fruit => ...) and pass fruit as a prop to FruitItem.

3

Create the FruitItem component

Create a React functional component called FruitItem that takes a prop called fruit. Return a <div> that displays the fruit's name and color in the format: Apple is Red. Do not change the fruit prop inside this component.

React

const fruits = [
  { name: 'Apple', color: 'Red' },
  { name: 'Banana', color: 'Yellow' },
  { name: 'Grape', color: 'Purple' }
];

function FruitList() {
  return (
    
      {fruits.map(fruit => )}
    
  );
}

// Create FruitItem component here
# Your code here

Hint

Use destructuring in the function parameter to get fruit. Return a <div> with the text showing name and color.

4

Render the FruitList component

Add a ReactDOM render call to render the FruitList component inside the HTML element with id root. Use ReactDOM.createRoot and root.render methods.

React

ReactDOM.createRoot(document.getElementById('root'))
root.render()

Hint

Use ReactDOM.createRoot with document.getElementById('root') and then call root.render(<FruitList />).

Practice

1. In React, what does it mean that props are read-only?

easy

A. You cannot change props inside the child component.

B. You can modify props directly in the child component.

C. props are only used for styling components.

D. props are used to store component state.

Solution

1. Step 1: Understand the role of props

   Props are data passed from a parent component to a child component in React.

2. Step 2: Recognize props immutability

   Props are read-only, meaning the child component cannot change them directly.

3. Final Answer:

   You cannot change props inside the child component. -> Option A

4. Quick Check:

   Props are read-only = D [OK]

Hint: Remember: props come from parent, child can't change them [OK]

Common Mistakes:

• Trying to modify props directly inside child component
• Confusing props with state
• Thinking props are for styling only

2. Which of the following is the correct way to access a prop named title inside a functional component?

easy

A. const title = this.props.title;

B. const title = getProps.title;

C. const title = state.title;

D. const title = props.title;

Solution

1. Step 1: Identify functional component syntax

   In functional components, props are passed as a parameter named props.

2. Step 2: Access prop correctly

   You access a prop by props.title. Using this.props is for class components.

3. Final Answer:

   const title = props.title; -> Option D

4. Quick Check:

   Functional component props access = B [OK]

Hint: Use props.parameterName inside functional components [OK]

Common Mistakes:

• Using this.props in functional components
• Confusing state with props
• Trying to use undefined variables like getProps

3. What will be the output of this React component?

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

// Usage: <Greeting name="Bob" />

medium

A. Hello, Bob!

B. Hello, Alice!

C. Error: Cannot assign to props.name

D. Hello, undefined!

Solution

1. Step 1: Understand props mutability

   Although props are read-only and mutating them is an anti-pattern, JavaScript allows changing the object property within the component function.

2. Step 2: Determine rendered output

   The assignment props.name = "Alice" mutates the value before the return, so the output is "Hello, Alice!".

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   Props mutation affects render output = B [OK]

Hint: Mutating props technically works but violates React's read-only principle [OK]

Common Mistakes:

• Thinking props mutation doesn't affect output
• Expecting an error from assignment
• Confusing props with state

4. Identify the error in this React functional component:

function Counter(props) {
  props.count = props.count + 1;
  return <div>Count: {props.count}</div>;
}

medium

A. Props are being mutated directly, which is not allowed.

B. The component should use this.state instead of props.

C. The return statement is missing parentheses.

D. The component should not return JSX.

Solution

1. Step 1: Check for props mutation

   The line props.count = props.count + 1; tries to change props directly, which is not allowed.

2. Step 2: Understand correct data handling

   Props are read-only; to change data, use state or callbacks, not direct mutation.

3. Final Answer:

   Props are being mutated directly, which is not allowed. -> Option A

4. Quick Check:

   Direct props mutation = error = A [OK]

Hint: Never assign to props; use state for changes [OK]

Common Mistakes:

• Trying to mutate props directly
• Confusing props with state usage
• Ignoring React's immutability rules

5. You want to create a component that shows a user's name and allows updating it inside the component. Which approach correctly respects that props are read-only?

hard

A. Modify the props.name directly inside the component to update the name.

B. Use a global variable to store the name and ignore props.

C. Copy props.name to a state variable and update the state to change the name.

D. Pass a new name prop from the child component to the parent.

Solution

1. Step 1: Understand props immutability

   Props cannot be changed inside the component; they are read-only.

2. Step 2: Use state for data that changes

   Copy the prop value to a state variable, then update the state to reflect changes.

3. Final Answer:

   Copy props.name to a state variable and update the state to change the name. -> Option C

4. Quick Check:

   Use state to update data, not props = C [OK]

Hint: Use state for changes, keep props read-only [OK]

Common Mistakes:

• Trying to change props directly
• Using global variables instead of state
• Passing props from child to parent (not possible)