Lists in react

use Array’s built-in map function to create a new array that has the same number of elements, and where each element is the result of calling the function you provide

You might’ve noticed I used the item’s array index as the key prop in both examples above. This is actually not a great idea in all cases, and I’ll tell you why.

(The best choice for a key is an item’s unique ID, if it has one.)

React relies on the key to identify items in the list. Remember React uses a virtual DOM, and it only redraws the components that changed since the last render.

The first time a component like IdiomaticReactList is rendered, React will see that you want to render a bunch of items, and it will create DOM nodes for them.

The next time that component renders, React will say, “I already have some list items on screen – are these ones different?” It will avoid recreating DOM nodes if it can tell that the items are the same.

But here’s the important bit: React can’t tell with a simple equality check, because every time a JSX element is created, that’s a brand new object, unequal to the old one.

So that’s where the key prop comes in. React can look at the key and know that, yes, even though this <Item> is not strictly === to the old <Item>, it actually is the same because the keys are the same.

This leads to a couple rules for keys. They must be:

• Unique – Every item in the list must have a unique key. So, person.firstName would be a bad choice, for example (might not be unique).

and

• Permanent – An item’s key must not change between re-renders, unless that item is different. So, Math.random is a bad choice for a key (it’ll change every time… and it might not be unique (slim chance of that, though))

… full article

Container vs Presentational Components

The main thing to keep in mind is that container components and presentational components go together when setting up a React app component hierarchy. React apps will almost always need some components that take responsibility for the way things work, and components for displaying actual data. Where presentational components don’t manage state, container components do. Where presentational components are usually children in the app component hierarchy, container components are usually the parents of presentational components.

… full article

More topics covered:

• list – condition
• list – add
• list – remove
• pass functions as an arguments

Links:

• Class code: react simple list
• Class code: react more lists
• Lesson Summary Video!