We often need to map through an array of values and show them as a list, as multiple cards, a set of images, or some other form. We can use the map() function to map array elements in React framework. It will loop through an array of values and show them as an <li>, <div>, <card>, <img> or whatever html body element we need to render the values in.
Let’s consider our search engines example discussed in the previous React tutorials. We have an Object Array with search engine details, where we need to map through and show each detail.
Consider the search_engines Object array with the details as shown below.
export const search_engines = [
{
id: 1,
active_status: false,
name: "Google",
logo: "images/google.png",
desc: "Google Search Engine is a search engine developed by Google! It is the largest and most influential search engine.",
types: [{
name: "Web",
url: "https://cn.bing.com/search?isource=infinity&iname=bing&itype=web&q="
}, {
name: "Images",
url: "https://cn.bing.com/images/search?isource=infinity&iname=bing&q="
}, {
name: "News",
url: "https://global.bing.com/news/search?isource=infinity&iname=bing&q="
}, {
name: "Videos",
url: "https://cn.bing.com/videos/search?isource=infinity&iname=bing&q="
}]
},
{
id: 2,
active_status: false,
name: "Yahoo",
logo: "images/yahoo.png",
desc: "Yahoo Search is a search engine operated by Yahoo!",
types: [{
name: "Web",
url: "https://search.yahoo.com/search?isource=infinity&iname=yahoo&itype=web&p="
}, {
name: "Images",
url: "https://images.search.yahoo.com/search?isource=infinity&iname=yahoo&p="
}, {
name: "News",
url: "https://news.search.yahoo.com/search?isource=infinity&iname=yahoo&p="
}, {
name: "Videos",
url: "https://video.search.yahoo.com/search/video?isource=infinity&iname=yahoo&p="
}]
},
{
id: 3,
active_status: false,
name: "Bing",
logo: "images/bing_new.png",
desc: "Bing is a search engine operated by Microsoft!",
types: [{
name: "Web",
url: "https://cn.bing.com/search?isource=infinity&iname=bing&itype=web&q="
}, {
name: "Images",
url: "https://cn.bing.com/images/search?isource=infinity&iname=bing&q="
}, {
name: "News",
url: "https://global.bing.com/news/search?isource=infinity&iname=bing&q="
}, {
name: "Videos",
url: "https://cn.bing.com/videos/search?isource=infinity&iname=bing&q="
}]
},
]
export default {
search_engines
}We need to import the search_engines array and map through each entry to display the details in it. Consider the map function as shown below. Make sure to pass a key (key={data.id}) when showing a list of entries. Style your div’s and show the details as per your design preferences.
{search_engines.map(function(data) {
return (
<div key={data.id} style={engine_card}>
<div style={{display: 'flex', aligItems: 'center', height: '20px'}}>
<div style={title}>{data.name}</div>
</div>
<div style={{card_content}}>
<div style={card_content}>{data.desc}</div>
</div>
</div>
)
})}The simple map function shown above can display Object Array data in any div or style we want. Note to add a key attribute with a unique field attribute like an id to distinguish the rendered list items.
