fix(curriculum): wrap keywords in backticks (#57992)

This commit is contained in:
Huyen Nguyen 2025-01-09 06:22:17 +07:00 committed by GitHub
parent 149b9e1754
commit 8af2876839
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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 `<li>` element containing the fruit's name. The newly created array of `<li>` elements is then displayed inside the `<ul>` parent tags.
In this example, the `map()` function iterates over each item in the `fruits` array. For each fruit, it creates a new `<li>` element containing the fruit's name. The newly created array of `<li>` elements is then displayed inside the `<ul>` 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.