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

Need a 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

Need a 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

Need a 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()

Need a hint?

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