Created
January 25, 2019 19:55
-
-
Save gil00pita/219020e9602a58cfc0b3edf41ad4b9ba to your computer and use it in GitHub Desktop.
Although this tutorial focuses on ES6, JavaScript array map and filter methods need to be mentioned since they are probably one of the most used ES5 features when building React application. Particularly on processing data. These two methods are muc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// For example, imagine a fetch from API result returns an array of JSON data: | |
const users = [ | |
{ name: 'Nathan', age: 25 }, | |
{ name: 'Jack', age: 30 }, | |
{ name: 'Joe', age: 28 }, | |
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Then we can render a list of items in React as follows: | |
import React, { Component } from 'react'; | |
class App extends Component { | |
// class content | |
render(){ | |
const users = [ | |
{ name: 'Nathan', age: 25 }, | |
{ name: 'Jack', age: 30 }, | |
{ name: 'Joe', age: 28 }, | |
]; | |
return ( | |
<ul> | |
{users | |
.map(user => <li>{user.name}</li>) | |
} | |
</ul> | |
) | |
} | |
} | |
//We can also filter the data in the render. | |
<ul> | |
{users | |
.filter(user => user.age > 26) | |
.map(user => <li>{user.name}</li>) | |
} | |
</ul> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment