Lists and grid views are very common UI patterns.
Think Youtube, Ubereats, Instagram, Facebook, ...
Why? Because everything is easily representable as a list or grid of objects!
each item object have properties, which can be another list or another object, and so on...
from: https://www.airbnb.ca/
https://www.ubereats.com/en-CA/
Airbnb view, for example has a grid view of places, each property has properties
UberEats has a grid of restaurants, each restaurant has properties...
In this chapter we'll represent the memes and the menu items in nice list and grid views.
So far, in both the Menu example and Memes project, we are hard-coding a lot of things:
// Menu project
<Meal name="burger" picture="🍔" price="$4.50" />
<Meal name="pizza" picture="🍕" price="$2.50" />
<Meal name="ramen" picture="🍜" price="$5.50" />
// Meme project
<Meme id="fJdpdS5jaDje8" title="dogs running" />
<Meme id="13mLwGra9bNEKQ" title="dogs running 2" />
<Meme id="2kfl3evk6nUKk" title="dogs running 3" />
We are explicitly rendering 3 Meals and 3 Memes. What if the data is coming from somewhere else? We don't know how many there will be!
We are passing "static" values as props. Would be nice to store them in variables! Even better, group them in arrays!
map(), filter(), and reduce()// Map in ES5
[1, 2, 3, 4].map(function(item) { return item*2 });
// Map in ES6
[1, 2, 3, 4].map(item => item*2)
// [2, 4, 6, 8]
// Filter in ES6
[1, 2, 3, 4].filter(item => item%2===0)
// [2, 4]
// Reduce in ES6
[1,2,3,4].reduce((accumulator, item) => accumulator + item, 0)
// 10
Process each item and get result for each
Filters items based on given condition
Reduce items into a single result
Example: (Open the console tab to see results)
https://codesandbox.io/s/react-list-and-keys-todo-1-9wt1t
Here's the Menu project again for reference:
<Meal name="burger" picture="🍔" price="$4.50" />
<Meal name="pizza" picture="🍕" price="$2.50" />
<Meal name="ramen" picture="🍜" price="$5.50" />
https://codesandbox.io/s/react-workshop-menu-activity-2-solution-m9mks