The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Use map to Create React Components from Arrays of Data

Use map to Create React Components from Arrays of Data

4:18
React components can be dynamically generated based on a dataset. This lesson will show you how to do just that by mapping over the `state.data` object.
Watch this lesson now
Avatar
egghead.io

React components can be dynamically generated based on a dataset. This lesson will show you how to do just that.

Avatar
Jeff

Why did you use the index of the array, rather than the id field of the data? If that array of users had been filterable, would that have been a problem?

In reply to egghead.io
Avatar
Joseph

In this instance using the array index as the key was simply the most efficient method to ensure a unique value. If we had been filtering the data in this example I would have used a simple array.filter before mapping the data to the PersonRow component... so using the array index would have worked just fine again.

In reply to Jeff
Avatar
Kirk

Why did you use map instead of forEach? I mostly use map when I need to return a transformed array. Was there some transforming happening here that I am not aware of?

In reply to egghead.io
Avatar
Joseph

Kirk, perhaps I am misunderstanding your question, but map does exactly what we need it to do here; return an array of PersonRow objects. It would take more code to do the same with a forEach.

You might want to take a look at the lesson on JSX ( https://egghead.io/lessons/jsx-deep-dive ). Just keep in mind that each tag in our JSX is a function and in this case the array of PersonRows is an argument passed to the <table> function as children.

The resulting js looks like this:
React.DOM.table(null,
this.state.data.map(function(person,i){
return PersonRow({key: i, data: person})
})
)

In reply to Kirk
Avatar
Kirk

Looks totally obvious now. Thanks.

In reply to Joseph
Avatar
Nick

This video could have been better. The purpose of the "key" is to track exactly which rows are coming and going from the list when the list changes. You should have put the real ID in, instead of just passing along the useless array index to placate the warning message.

It may appear to work when passing the array index in, but as soon as you try to add animations or put any more complex state into the rows, you may run into problems.

Even if you don't do that, if items are added or removed from the middle of the array, the DOM operations react generates will probably be inefficient. Instead of keeping the people mapped to their rows, things would shift and you'd have whole rows changed into different people, instead of simply adding/removing the effected DOM nodes.

In reply to Joseph
Avatar
Joseph

Nick, thanks for the feedback. While in this example passing the array index works perfectly, if this example was concerned with data that could change, or any of the scenarios you mentioned, I would use a key that would not change when that change in the data occurred. Thanks again!

In reply to Nick
Avatar
Huy

The video is so good. But can you please tell me when and what benefits to use stateless Component.
Is this the same with this code ? ( I bet it is because I tried it )

class Person extends React.Component{
render(){
return (

{this.props.data.id}
{this.props.data.name}

);
}
}

Thank you !

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?