mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-22 21:08:12 +08:00
fix(curriculum): wrap keywords in backticks (#57992)
This commit is contained in:
parent
149b9e1754
commit
8af2876839
@ -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.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user