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 ( +