s4 react06.md

Introduction to React.js: Lesson 6 - Lists and Keys

Welcome to the sixth lesson of the "Introduction to React.js" course! In this lesson, we'll explore how to render lists of items in React and understand the importance of using keys to optimize rendering performance.

Rendering Lists Using the map Function The map function in JavaScript is a powerful tool for rendering lists of items. It allows you to transform each item in an array into a new element.

import React from 'react';

function List(props) {
  const items = props.items.map((item, index) => <li key={index}>{item}</li>);
  return <ul>{items}</ul>;
}

export default List;

The Importance of Keys Keys are essential when rendering lists in React. They help React identify which items have changed, been added, or been removed. Keys should be unique and stable across renders.

import React from 'react';

function StudentList(props) {
  const students = props.students.map(student => <li key={student.id}>{student.name}</li>);
  return <ul>{students}</ul>;
}

export default StudentList;

Your Task: Todo List For this lesson's assignment, create a TodoList component that displays a list of todo items. Use the map function to render each todo item as an <li> element. Make sure to provide a unique key for each item to optimize rendering.

Conclusion Congratulations! You've completed the sixth lesson in the "Introduction to React.js" course. You now know how to render lists of items in React using the map function and the importance of using keys for optimal rendering performance. Lists are a common part of user interfaces, and understanding how to work with them in React is essential. In the next lesson, we'll dive into forms and controlled components. Keep up the great work on your journey to mastering React.js!