Component mapping in React

You definitely would have made use of the array.map() feature of JavaScript in React, probably to map a list of items or some data into your app's UI. But, what if you could do just that to your components?

In this short guide, I'd show you how to accomplish the same thing, just as you do with an array of list items. This is just something I discovered I could do, instead of mashing components up together in my App component. Not sure if it is among the best practices, but it makes my app component more readable and concise.

Most times while creating awesome stuff with ReactJS, we get a lot of components packed up together inside the App component. An example below illustrates what I'm trying to explain.

import React from "react"

import Form from "/path/to/file"
import OneAwesomeComponent from "/path/to/file"
import AnotherComponent from "/path/to/file"
import SocialCard from "/path/to/file"
import ContactCard from "/path/to/file"

const App = () =>  {
   return (
      <div className="app">
          <Form />
          <OneAwesomeComponent />
          <AnotherComponent />
          <SocialCard />
          <ContactCard />
          ...
      </div>
   )
}

export default App

To avoid the continuous imports of components in your app component, you can go ahead to create a variable that stores all your components in an array and then store the properties of each component in a unique object. You can choose to create that variable in the App component, but to avoid having too many things in one place. I would advise that you go with the React "separation of concerns" principle.

Let's create a module (a module still refers to a file) that we can store all the component data that is needed.

// component-data.js
import React from "react"

import Form from "/path/to/file"
import OneAwesomeComponent from "/path/to/file"
import AnotherComponent from "/path/to/file"
...

export const components = [
     {
         id: 0,
         child: <Form />
     },
     {
         id: 1,
         child:  <OneAwesomeComponent />
     },
     {
         id: 2,
         child: <AnotherComponent />
     } 
...
]

You'd need to "import React" for you to be able to pass the actual component as a property of the object.

Now that you have the component-data module, what you need to do is import it into the app component, and then loop through all the components with the map feature.

// app.js
import React from "react"

import {components} from "/path/to/file"

const App = () =>  {
  return (
    <div className="app">
      {components.map(component => {
        return (
           <div key={component.id}>{component.child}</div>
        )
      })}
    </div>
  )
}

export default App

With that, you would have all your components displaying properly in the DOM. You can see that by utilizing the array.map() feature of javascript you've been able to concisely write what would take roughly up to fifteen lines in just seven lines of code.

Thank you for taking the time to read this. I hope it helps you make your work faster and simpler in the future.