📋 Lesson 4: Lists & Dynamic Content

Learn how to render lists, filter data, and work with arrays in React!

🎯 Current Filters (Change the values above to see different results!)

Students:

Min Age: 20

Grade: A

Subject: Computer Science

Products:

Max Budget: $500

Category: Electronics

Stock: In Stock Only

Results:

Students: 1/5

Products: 0/5

High Priority Todos: 3

👥 Student List (.map() + .filter())

Filtered Students (1 matches)

Alice

Age: 20

Grade: A

Computer Science

🛍️ Product Store (Complex Filtering)

Available Products (0 found)

No products match your criteria. Try increasing your budget or changing the category!

✅ Todo Management (Multiple Filters)

🔥 High Priority (3)

✅Learn React

Due: 2024-01-15

⏳Master JavaScript

Due: 2024-01-20

⏳Practice coding

Due: 2024-01-25

✅ Completed (2)

✅Learn React

Priority: high

✅Read documentation

Priority: low

⏳ Pending (3)

⏳Master JavaScript
high2024-01-20
⏳Build a project
medium2024-02-01
⏳Practice coding
high2024-01-25

🔄 Sorting Examples

Students by Age (Oldest First)

1. Eve23 years
2. Bob22 years
3. Diana21 years
4. Alice20 years
5. Charlie19 years

Products by Price (Cheapest First)

1. Book$29
2. Chair$199
3. Desk$299
4. Phone$699
5. Laptop$999

🎯 What You're Seeing

  • • Array.map(): Transform each item into JSX
  • • Array.filter(): Show only items that match criteria
  • • Array.sort(): Reorder items by specific properties
  • • Keys: Each list item needs a unique key prop
  • • Conditional styling: Different styles based on data

⚛️ React List Concepts

  • • Dynamic rendering: Lists update when data changes
  • • Key prop: Helps React track which items changed
  • • No mutations: Use filter/map, don't modify original arrays
  • • Performance: Virtual DOM efficiently updates only changed items
  • • Accessibility: Proper semantic HTML for screen readers

📝 How List Rendering Works

1. Basic List Rendering

{students.map((student) => (
  <div key={student.id}>
    <h3>{student.name}</h3>
    <p>Age: {student.age}</p>
  </div>
))}

Use .map() to transform array items into JSX. Always provide a unique key!

2. Filtering Before Rendering

const filteredStudents = students.filter(student => 
  student.age >= 20 && 
  student.grade === "A"
);

{filteredStudents.map(student => ...)}

Filter arrays first, then render. This creates new arrays without modifying originals.

3. Conditional Styling in Lists

<div className={`p-4 rounded ${
  product.inStock 
    ? "border-green-200 bg-green-50" 
    : "border-red-200 bg-red-50"
}`}>
  {product.name}
</div>

Use conditional logic inside map() to style items differently based on their data.

🚀 Lists Challenge!

  1. 1. Change minAge to 21 and see fewer students
  2. 2. Set maxBudget to 100 - watch products disappear!
  3. 3. Try targetGrade = "B" to see different students
  4. 4. Change selectedCategory to "Furniture"
  5. 5. Set showOnlyInStock = false
  6. 6. Add a new student or product to the arrays!