1
0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 15:18:01 +00:00

Add Render An Array Of Elements With React 16 as a javascript til

This commit is contained in:
jbranchaud
2017-09-26 21:57:47 -05:00
parent d7e1baaed3
commit d18c2060d0
2 changed files with 37 additions and 1 deletions

View 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)