Use map to Create React Components from Arrays of Data
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.
[00:00] In this lesson, we're going to talk about iterating over a data set in order to create our JSX. Right here in our render method, right before our return statement, I'm going to say let items equal this.state.items. That's going to set that data up.
[00:15] We're going to set up our constructor, where we'll call super to get our context. We're going to say this.state equals items, and we'll set that to an array. Now to get that data, we're going to use fetch to make an AJAX call to the Star Wars API. We'll just hit up the people endpoint there.
[00:36] If you're not familiar with that, it's just this open source API that returns a bunch of data about Star Wars. When we get that data back, we're going to get results off of that. We're going to call it items, and then, we'll just set our state of items to that value.
[00:54] Now that we've got that here in a render method, we can simply interpolate items.map. We can just map over those guys -- it's an array -- which will give us our item. We can just return something simple, like an h4.
[01:09] Inside that guy, say item.name, which is a value that we know we're going to get off of that. Save that, and we can see we've got our names coming in, but we've also got this warning down here that says each child in an array or iterator should have a unique key prop.
[01:27] All that's saying is right here in our h4, we need a key prop that is equal to something unique. Now, we could use the index off of the iterator here. However, that's not going to be as performant as something completely unique to the record.
[01:48] Since, in this case, I don't have an ID, I'm going to use item.name. I'm going to save that. We get our data, and our warning is gone. Now we could have just as easily created a separate component for this. Let's say we've got one here called person. It takes in its props. It's going to return the same h4 with props.person.name.
[02:13] Come up here, and rather than returning the h4, we're going to return a person component. We'll say person equals item. Save that, and now again, we've got our data, but we're back to the same error. Now in this case, it's not telling us that the key is needed on the h4, because in the context of this component, the h4 has no siblings.
[02:44] The key is needed amongst siblings. Here on the person component, we're going to say key equals item.name. Save that, and everything is working fine.
[02:57] If we wanted to get a look at how we can further use this JSX generation from a data set, let's say if this.state.filter -- we'll need to create that -- but if we have a filter, we'll say items equal items.filter.
[03:15] That'll give us our item. Then, we'll say if the item.name.toLowerCase includes this.state.filter, also toLowerCase, then, we'll have our filtered item. Let's go ahead and set up a quick filter method. This is just going to take an event off of an input. We're going to set our state of filter equal to e.target.value.
[03:49] That'll just be the result of an input field. We'll just set that right here. Input, and on its onchange event, we'll say this.filter. We'll bind that to this. Save that. We've got our data. We've got our input field here. If I type L, we're going to get all the names with L. If I type C, we're going to get C3PO. V, we're going to get Darth Vader.