From 23d63818288ff6bf6c3bece48e3681964f1158d5 Mon Sep 17 00:00:00 2001 From: KurtWayn3 Date: Sun, 17 Feb 2019 10:44:50 -0700 Subject: [PATCH] Update JSX to Include How to Use Maps (#32698) --- guide/english/react/jsx/index.md | 39 ++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/guide/english/react/jsx/index.md b/guide/english/react/jsx/index.md index 065b107420..5b8965e498 100644 --- a/guide/english/react/jsx/index.md +++ b/guide/english/react/jsx/index.md @@ -101,7 +101,46 @@ Closing the `input` tag will make the JSX valid: const 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 ( +
+ {list.map(function(item) { + return
{item.title}
; + })} +
+ } +}; + +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)