mirror of
https://github.com/jbranchaud/til
synced 2026-01-17 14:08:01 +00:00
Add Render An Array Of Elements With React 16 as a javascript til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
|||||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||||
|
|
||||||
_565 TILs and counting..._
|
_566 TILs and counting..._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -219,6 +219,7 @@ _565 TILs and counting..._
|
|||||||
- [Numbers Are Empty](javascript/numbers-are-empty.md)
|
- [Numbers Are Empty](javascript/numbers-are-empty.md)
|
||||||
- [Object Initialization With Shorthand Property Names](javascript/object-initialization-with-shorthand-property-names.md)
|
- [Object Initialization With Shorthand Property Names](javascript/object-initialization-with-shorthand-property-names.md)
|
||||||
- [Random Cannot Be Seeded](javascript/random-cannot-be-seeded.md)
|
- [Random Cannot Be Seeded](javascript/random-cannot-be-seeded.md)
|
||||||
|
- [Render An Array Of Elements With React 16](javascript/render-an-array-of-elements-with-react-16.md)
|
||||||
- [Running ES6 Specs With Mocha](javascript/running-es6-specs-with-mocha.md)
|
- [Running ES6 Specs With Mocha](javascript/running-es6-specs-with-mocha.md)
|
||||||
- [Splat Arguments To A Function](javascript/splat-arguments-to-a-function.md)
|
- [Splat Arguments To A Function](javascript/splat-arguments-to-a-function.md)
|
||||||
- [Throttling A Function Call](javascript/throttling-a-function-call.md)
|
- [Throttling A Function Call](javascript/throttling-a-function-call.md)
|
||||||
|
|||||||
35
javascript/render-an-array-of-elements-with-react-16.md
Normal file
35
javascript/render-an-array-of-elements-with-react-16.md
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
# Render An Array Of Elements With React 16
|
||||||
|
|
||||||
|
React 16 was released today. Among many exciting features and updates is
|
||||||
|
support for rendering an array of elements.
|
||||||
|
|
||||||
|
This can look as simple as this example:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
return [
|
||||||
|
<li key="1">One</li>,
|
||||||
|
<li key="2">Two</li>,
|
||||||
|
<li key="3">Three</li>
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
It really shines in the case of generating elements from an array of data.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let data = [
|
||||||
|
{ value: "One", key: "1" },
|
||||||
|
{ value: "Two", key: "2" },
|
||||||
|
{ value: "Three", key: "3" }
|
||||||
|
];
|
||||||
|
return data.map(item => {
|
||||||
|
return (
|
||||||
|
<li key={item.key}>
|
||||||
|
{item.value}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
No need to wrap the result in a `<div>`!
|
||||||
|
|
||||||
|
[source](https://facebook.github.io/react/docs/react-component.html#render)
|
||||||
Reference in New Issue
Block a user