From 0e6e103d32b19529b5cf9a36daeff9b70aee1ddf Mon Sep 17 00:00:00 2001 From: Larry Fisherman Date: Tue, 14 Jun 2022 04:19:42 +0200 Subject: [PATCH] Update use-array.map-to-dynamically-render-elements.md (#46471) --- .../react/use-array.map-to-dynamically-render-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/curriculum/challenges/english/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md b/curriculum/challenges/english/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md index 0d6cca62f61..3fe2bde0999 100644 --- a/curriculum/challenges/english/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md +++ b/curriculum/challenges/english/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md @@ -16,7 +16,7 @@ For example, you create a simple "To Do List" app. As the programmer, you have n The code editor has most of the `MyToDoList` component set up. Some of this code should look familiar if you completed the controlled form challenge. You'll notice a `textarea` and a `button`, along with a couple of methods that track their states, but nothing is rendered to the page yet. -Inside the `constructor`, create a `this.state` object and define two states: `userInput` should be initialized as an empty string, and `toDoList` should be initialized as an empty array. Next, delete the comment in the `render()` method next to the `items` variable. In its place, map over the `toDoList` array stored in the component's internal state and dynamically render a `li` for each item. Try entering the string `eat, code, sleep, repeat` into the `textarea`, then click the button and see what happens. +Inside the `constructor`, create a `this.state` object and define two states: `userInput` should be initialized as an empty string, and `toDoList` should be initialized as an empty array. Next, delete the `null` value in the `render()` method next to the `items` variable. In its place, map over the `toDoList` array stored in the component's internal state and dynamically render a `li` for each item. Try entering the string `eat, code, sleep, repeat` into the `textarea`, then click the button and see what happens. **Note:** You may know that all sibling child elements created by a mapping operation like this do need to be supplied with a unique `key` attribute. Don't worry, this is the topic of the next challenge.