From 8af28768393005cfa07aa0fceed454e94cc6230f Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Thu, 9 Jan 2025 06:22:17 +0700
Subject: [PATCH] fix(curriculum): wrap keywords in backticks (#57992)
---
.../673500b41af8500191febedc.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
index fdaf553686e..10e1c2d4cfe 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
@@ -25,9 +25,9 @@ function FruitList() {
}
```
-In this example, the `map()` function iterates over each item in the fruits array. For each fruit, it creates a new `
` element containing the fruit's name. The newly created array of `` elements is then displayed inside the `` parent tags.
+In this example, the `map()` function iterates over each item in the `fruits` array. For each fruit, it creates a new `- ` element containing the fruit's name. The newly created array of `
- ` elements is then displayed inside the `
` parent tags.
-However, when rendering lists in React, it is important not to forget the key prop to each element in the list. The key must always be unique and it helps React identify which items have changed, been added, or been removed, which is essential for efficient rendering and updating the list.
+However, when rendering lists in React, it is important not to forget the `key` prop to each element in the list. The key must always be unique and it helps React identify which items have changed, been added, or been removed, which is essential for efficient rendering and updating the list.
Let's modify our example to include keys:
@@ -46,7 +46,7 @@ function FruitList() {
In this refactored example, we are creating a unique key for each list item by concatenating the fruit name with its index. This ensures that each list item has a distinct key, which helps React efficiently manage and update the list when items are added, removed, or reordered.
-React's also allows you to render more complex structures. For instance, you might have an array of objects representing users, each with multiple properties that you want to display:
+React also allows you to render more complex structures. For instance, you might have an array of objects representing users, each with multiple properties that you want to display:
```js
function UserList() {
@@ -68,7 +68,7 @@ function UserList() {
}
```
-In this example, we're creating a more complex JSX structure for each user, displaying both their name and email. We're using the user's id as the key, which is a good practice.
+In this example, we're creating a more complex JSX structure for each user, displaying both their name and email. We're using the user's `id` as the key, which is a good practice.
In conclusion, rendering lists in React involves converting arrays of data into JSX elements, typically using the `map()` function.