I personally love React because it allows me to create simple, yet beautiful interactive websites in just a few days. For really simple apps, even a few hours are enough.
Almost all web applications work with an external server (API) to receive information. For example, an e-commerce store built in React will receive information about products, their prices, availability, and other details.
Product details will be stored in the object with various properties. Because there are many products, you will receive product information data as an array of objects.
In this article, I want to show you how to use map() to render multiple components.
Overall, map() is an excellent method for working with arrays in JavaScript. Because React is a JavaScript-based library, you can use it in React as well. In fact, map() is perhaps among (if not THE) most commonly used JavaScript method in React.
If you don’t know what map() does, I’ll explain it in simple words. It accepts one argument – a callback function that specifies ‘what to do’ with each item in the array. The callback function has one argument itself, which represents every item in the array. Then map() returns the transformed array back to us. The fact that it does not have a side effect but returns the new array is great because we can use it directly in the JSX.
Practical use case – map() to render multiple components
When building React apps, we use map() mainly to transform an array of objects into an array of components. In the process, we take data from each object and pass it as props to newly created components. As a result, we transform simple data (strings, numbers, Booleans) into actual components that make up our UI. This is a quite useful feature.
Let’s say we have products array, where each item is an object that contains information about a product.
Let products = [{name: “Apple”, price: 3, available: true}] < add more objects
You can use map() to create UI elements for each product. Let’s say you want to create a simple <div> that outputs product name, price, and ‘Add to cart’ button, which is disabled if the product is unavailable.
We could write something like this:
Function app() {
Let products = [{name: “Apple”, price: 3, available: true}] < add more objects
Return (
<div>
Products.map( product => <Product details={product} />)
</div>
}
One thing to note is that when you return an array of components, make sure to place them in a single container in React. JSX has this rule that all React components must return only one element. Of course, you can render multiple components in React, but all of them must have one parent.
Build child component
Then we could design a child component <Product> to access product details passed via props. For example, we could create a heading element and set its content to props.details.name and similarly display price value as well.
Then when adding a button, we would need to use conditional styles to disable the button if available value for that product was false. Conditional styles in React are also interesting, but that’s beyond the scope of this post. SimpleFrontEnd has an excellent guide on adding conditional className in React.
