Update JSX to Include How to Use Maps (#32698)

guide/english/react/jsx/index.md

@@ -101,7 +101,46 @@ Closing the `input` tag will make the JSX valid:
 const email = <input type="email" />;
 ```
 
+### JSX Map Functionality
+
+You can use the built-in Javascript map functionality in JSX. This will allow you to iterate over a given list in your React application. 
+
+```javascript
+const list = [
+  {
+  title: 'Harry Potter and The Goblet of Fire',
+  author: 'JK Rowling',
+  genre: 'Fiction, Fantasy',
+  },
+  {
+  title: 'Extreme Ownership: How US Navy Seals Lead and Win',
+  author: 'Jocko Willink, Leif Babin',
+  genre: 'Biography, Personal Narrative',
+  },
+];
+
+class Example extends Component {
+  // component info here
+};
+```
+We use the curly braces to encapsulate our JSX:
+```javascript
+class Example extends Component {
+  render(){
+    return (
+      <div className="Example">
+        {list.map(function(item) {
+          return <div> {item.title} </div>;
+         })}
+      </div>
+  }
+};
+
+export default Example;
+```
+There you got it! We used JSX's map to convert a list of book details to HTML elements to the page. See more information on how to use maps below.
 
 ### More Information
 
 - [Introducing JSX](https://reactjs.org/docs/introducing-jsx.html)
+- [More Info On Using Maps](https://reactjs.org/docs/lists-and-keys.html)