fix: broken get a hint links [english] (#35280)

guide/english/certifications/front-end-libraries/react/use-array.map-to-dynamically-render-elements/index.md

@@ -0,0 +1,75 @@
+---
+title: Use Array.map() to Dynamically Render Elements
+---
+## Use Array.map() to Dynamically Render Elements
+
+## Hint 1:
+
+Define the two states as a JavaScript ```object```.
+
+```javascript
+{object: state, object: state}
+```
+
+## Hint 2:
+
+You need ```.map()``` to generate a line for every object in the array.
+
+```javascript
+this.state.toDoList.map(i => <li>{i}</li>);
+```
+
+## Solution:
+
+Once you add the map function, you will notice that it will generate a ```<li>``` for every item you put in the list.
+
+```jsx
+const textAreaStyles = {
+  width: 235,
+  margin: 5
+};
+
+class MyToDoList extends React.Component {
+  constructor(props) {
+    super(props);
+    // change code below this line
+    this.state = {
+      userInput: '',
+      toDoList: []
+    }
+    // change code above this line
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleSubmit() {
+    const itemsArray = this.state.userInput.split(',');
+    this.setState({
+      toDoList: itemsArray
+    });
+  }
+  handleChange(e) {
+    this.setState({
+      userInput: e.target.value
+    });
+  }
+  render() {
+    const items = this.state.toDoList.map(i => <li>{i}</li>); // change code here
+    return (
+      <div>
+        <textarea
+          onChange={this.handleChange}
+          value={this.state.userInput}
+          style={textAreaStyles}
+          placeholder="Separate Items With Commas" /><br />
+        <button onClick={this.handleSubmit}>Create List</button>
+        <h1>My "To Do" List:</h1>
+        <ul>
+          {items}
+        </ul>
+      </div>
+    );
+  }
+};
+```
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->