Skip to content

Commit d18c206

Browse files
committed
Add Render An Array Of Elements With React 16 as a javascript til
1 parent d7e1baa commit d18c206

File tree

2 files changed

+37
-1
lines changed

2 files changed

+37
-1
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
1010
For 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)
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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)

0 commit comments

Comments
 (0)