Phase 4: Fruit Show

Understand the Problem

We need to display the details for a specific fruit based on the ID in the URL. When a user clicks on a fruit in the index, they should be taken to a page that shows the fruit’s name, color, sweetness, and whether it has seeds.

Devise a Plan

1. Import and use useParams from react-router-dom to get the fruit ID
2. Search the fruits prop to find the fruit with that ID
3. If the fruit exists, display its details
4. If the fruit is not found, return null or display a message

Carry Out the Plan

File: src/FruitShow.jsx

// Pseudocode:
// 1. Get fruitId from URL
// 2. Find the matching fruit
// 3. Render the fruit's details

import { useParams } from 'react-router-dom';

function FruitShow({ fruits }) {
  const { fruitId } = useParams();
  const fruit = fruits.find(f => f.id === fruitId);

  if (!fruit) return null;

  return (
    <div className="fruit-show">
      <h2>{fruit.name}</h2>
      <p>Color: {fruit.color}</p>
      <p>Sweetness: {fruit.sweetness}</p>
      <p>Seeds: {fruit.seeds}</p>
    </div>
  );
}

export default FruitShow;

Expected Input and Output

• Input: Path /fruits/1, fruit data includes id: '1'
• Output: Displays the details for fruit with id '1'
• Input: Path /fruits/999 (not in dataset)
• Output: Returns null or blank screen (or could render a message)

Explanation for New Developers

useParams lets us grab values from the URL. If someone visits /fruits/3, we get that 3 as fruitId.

We use Array.find() to search the fruits array for a match, and then display the values from that object.

Real World Analogy

This is like scanning a product's barcode at a grocery store. The barcode (URL parameter) tells the system which product to show. The app looks up the barcode, and displays the matching fruit’s information.

Bonus Tip

If you want to show a message when the fruit isn't found, you could replace return null with return <p>Fruit not found</p>.