Manipulating Array Elements During Mapping in React
Problem:
What we’re going to be running into today is what to do when you have an array of elements to map, but you want to do something to each one first.
The Example:
I’ve been making a React app called Swars out of the Star Wars API.
That’s an excellent API, btw, very helpful and fun for training. Here’s a version I made 6 months ago in PHP. I just checked and the API was down so neither example was working.
…but we don’t need ’em to for this…
As you know, the records come through like this:
{
"name": "Luke Skywalker",
"height": "172",
"mass": "77",
"hair_color": "blond",
"skin_color": "fair",
"eye_color": "blue",
"birth_year": "19BBY",
"gender": "male",
"homeworld": "http://swapi.co/api/planets/1/",
"films": [
"http://swapi.co/api/films/2/",
"http://swapi.co/api/films/6/",
"http://swapi.co/api/films/3/",
"http://swapi.co/api/films/1/",
"http://swapi.co/api/films/7/"
],
"species": [
"http://swapi.co/api/species/1/"
],
"vehicles": [
"http://swapi.co/api/vehicles/14/",
"http://swapi.co/api/vehicles/30/"
],
"starships": [
"http://swapi.co/api/starships/12/",
"http://swapi.co/api/starships/22/"
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
"url": "http://swapi.co/api/people/1/"
}You can see the record doesn’t possess its own ID field. However, it does have a ‘url’ field, and tacked on to the url at the very end of the field is a number that you and I can tell is an ID number!
What We’re Tryna Do:
We want it so that when the user clicks on “People” it will display little data cards of all the people. Then when you click on one of those cards it’ll take you to specific information about that character.
But we need to get the id of the character so we can pull it up in our own app. That ‘url’ field just provides a link to that character’s data, we want just the id, so we can call a page in our app like “showCharacter/1” and it’ll call for the character data then.
How We Been Doing It:
When the user clicks “People” they come to a page where we’re just displaying all the characters in the API:
And we mapped them like this:
{this.props.ship.people && this.props.ship.people.map(person => <Link to={{ "pathname": `/people/` }}>
<span>{person.name}</span>
<img src={`${person.imgPath}`} />
</Link>)}
You can see there where the “pathname” is set to /people which means that no matter which of those little cards the user clicks they’re always going to end up back on this page.
That’s because we don’t have a specific ID to send to another page to just display that one user.
What We Shoulda Had Been Doing:
It turns out that while you’re mapping in React, you can turn that whole process into a function and do whatever you want to it, then return the results.
…gadzooks…
Like this:
{this.props.ship.people && this.props.ship.people.map(person=> {let idStr = person.url.split('/');
let personID = idStr[5];return (<Link to={{ "pathname": `/people/${personID}` }}>
<img src={`${person.imgPath'}`}/>
</Link>)})}
And all I really did was add a curly brace and a “return(“ in front of it and a “)}” at the end.
Then I could use the space between the opening curly brace and the “return” keyword to do whatever machinations I wanted.
In this case, I took the url of each record as I came to it, then I split it up into an array and the sixth item in the array [5] was the one with the ID!
Now you notice how when they click on it they go someplace cool this time?
<Link to={{ "pathname": `/people/${personID}` }}>That’ll take them to a specific page that can use that ID number to get the character’s specific details.
That’s All. Go Home.
Now you can use this technique whenever you want to manipulate your array elements while you’re mapping them. It might be math functions, formatting or even something like this, but you’re ready!
