The map function is a nati e Ja aScript built-in function on the arra . It
accepts a function to be run on each element of the arra , so the function abo e ill be run four times ith the alue of i starting as 1 and then it
ill run it again for the second alue here i ill be set as 10 and so on
and so forth.
Let's update the app e c eated on da ith ou App component he e.
Let's open up ou src/App.js le and eplace the content of the App
component ith this sou ce. Cleaning up a fe unused a iables and ou
import React from 'react';
const a = [1, 10, 100, 1000, 10000];
const App = (props) => { return ( <ul> {a.map(i => { return <li>{i}</li> })} </ul> ) }
export default App
Sta ting the app again ith the command gene ated b the create-react-app
command: npm start, e can see the app is o king in the b o se !
Ho e e , if e open the de elope console, e'll see e ha e an e o
Fo pe fo mance easons, React uses the i tual DOM to attempt to limit the numbe of DOM elements that need to be updated hen it e ende s the
ie . That is if nothing has changed, React on't make the b o se update an thing to sa e on o k.
This featu e is eall fantastic fo building eb applications, but sometimes e ha e to help React out b p o iding uni ue identi e s fo nodes. Mapping o e a list and ende ing components in the map is one of those times.
React e pects us to uniquely identif components b using a special p op: the key p op fo each element of the list. The key p op can be an thing e
ant, but it must be unique fo that element. In ou e ample, e can use the
i a iable in the map as no othe element in the a a has the same alue.
Let's update ou mapping to set the ke :
const App = (props) => { return (
<ul>
{a.map(i => {
return <li key={i}>{i}</li> })}
</ul> )
}
We talked about building a pa ent-child elationship a bit ea lie this eek, but let's di e a bit mo e into detail about ho e get access to the child en inside a pa ent component and ho e can ende them.
On da , e built a <Formatter /> component to handle date fo matting
ithin the Clock component to gi e ou use s e ibilit ith thei o n custom clock ende ing. Recall that the implementation e c eated is actuall p ett ugl and elati el comple .
const Formatter = (props) => {
let children = props.format.split('').map((e, idx) => { if (e === 'h') {
return <Hour key={idx} {...props} /> } else if (e === 'm') {
return <Minute key={idx} {...props} /> } else if (e === 's') {
return <Second key={idx} {...props} /> } else if (e === 'p') {
return <Ampm key={idx} {...props} /> } else if (e === ' ') {
return <span key={idx}> </span>; } else {
return <Separator key={idx} {...props} /> }
});
return <span>{children}</span>; }
We can use the React.Children object to map o e a list of React objects and
let React do this hea -lifting. The esult of this is a much cleane Formatter
const Formatter = ({format, state}) => { let children = format.split('').map(e => { if (e == 'h') { return <Hour /> } else if (e == 'm') { return <Minute /> } else if (e == 's') { return <Second /> } else if (e == 'p') { return <Ampm /> } else if (e == ' ') { return <span> </span>; } else { return <Separator /> } }); return (<span> {React.Children
.map(children, c => React.cloneElement(c, state))} </span>)
We ha e et to talk about the React.cloneElement() function, so let's look
at it briefl here. Remember WWWWWAAAAAYYYYY back on da e looked at ho the bro ser sees JSX? It turns it into Ja aScript that looks similar to:
React.createElement("div", null,
React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
React.createElement("h1", null, "Welcome back Ari") );
Rather than creating a ne component instance if e alread ha e one , sometimes e'll ant to cop it or add custom props/children to the component so e can retain the same props it as created ith. We can use React.cloneElement() to handle this for us.
The React.cloneElement() has the same API as the
React.createElement() function here the arguments are:
. The ReactElement e ant to clone
. An props e ant to add to the instance
. An children e ant it to ha e.
In our Formatter e ample, e're creating a cop of all the children in the
list the <Hour />, <Minute />, etc. components and passing them the state object as their props.
The React.Children object p o ides some nice utilit functions fo dealing
ith child en. Ou Formatter e ample abo e uses the map function to ite ate
th ough the child en and clone each one in the list. It c eates a key if
necessa fo each one, f eeing us f om ha ing to manage the uni ueness
React.cloneElement
const App = (props) => { return (
<ul>
{React.Children.map(a, i => <li>{i}</li>)} </ul>
) }
Back in the b o se , e e thing still o ks.
The e a e se e al othe eall useful methods in the React.Children object
a ailable to us. We'll mostl use the React.Children.map() function, but it's
good to kno about the othe ones a ailable
https://facebook.github.io/ eact/docs/top-le el-api.html# eact.child en to us. Check out the documentation
https://facebook.github.io/ eact/docs/top-le el-api.html# eact.child en fo a longe list.
Up th ough this point, e' e onl dealt ith local data, not eall focusing on emote data although e did b ie mention it hen building ou acti it feed component . Tomo o e' e going to get into inte acting ith a se e so e can use it in ou React apps.
Edit this page on Github (https://github.com/fullstackreact/30-days-of-react/blob/day-14/post.md)