File tree Expand file tree Collapse file tree 2 files changed +37
-1
lines changed Expand file tree Collapse file tree 2 files changed +37
-1
lines changed Original file line number Diff line number Diff line change @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
1010For a steady stream of TILs from a variety of rocketeers, checkout
1111[ til.hashrocket.com] ( https://til.hashrocket.com/ ) .
1212
13- _ 565 TILs and counting..._
13+ _ 566 TILs and counting..._
1414
1515---
1616
@@ -219,6 +219,7 @@ _565 TILs and counting..._
219219- [ Numbers Are Empty] ( javascript/numbers-are-empty.md )
220220- [ Object Initialization With Shorthand Property Names] ( javascript/object-initialization-with-shorthand-property-names.md )
221221- [ Random Cannot Be Seeded] ( javascript/random-cannot-be-seeded.md )
222+ - [ Render An Array Of Elements With React 16] ( javascript/render-an-array-of-elements-with-react-16.md )
222223- [ Running ES6 Specs With Mocha] ( javascript/running-es6-specs-with-mocha.md )
223224- [ Splat Arguments To A Function] ( javascript/splat-arguments-to-a-function.md )
224225- [ Throttling A Function Call] ( javascript/throttling-a-function-call.md )
Original file line number Diff line number Diff line change 1+ # Render An Array Of Elements With React 16
2+
3+ React 16 was released today. Among many exciting features and updates is
4+ support for rendering an array of elements.
5+
6+ This can look as simple as this example:
7+
8+ ``` javascript
9+ return [
10+ < li key= " 1" > One< / li> ,
11+ < li key= " 2" > Two< / li> ,
12+ < li key= " 3" > Three< / li>
13+ ];
14+ ```
15+
16+ It really shines in the case of generating elements from an array of data.
17+
18+ ``` javascript
19+ let data = [
20+ { value: " One" , key: " 1" },
21+ { value: " Two" , key: " 2" },
22+ { value: " Three" , key: " 3" }
23+ ];
24+ return data .map (item => {
25+ return (
26+ < li key= {item .key }>
27+ {item .value }
28+ < / li>
29+ );
30+ });
31+ ```
32+
33+ No need to wrap the result in a ` <div> ` !
34+
35+ [ source] ( https://facebook.github.io/react/docs/react-component.html#render )
You can’t perform that action at this time.
0 commit comments