# react-map-components

> A wrapper component to map props to multiple children components using an array of props. Edit

Latest version **1.0.12** (published 2017-07-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-map-components
pnpm add react-map-components
yarn add react-map-components
bun add react-map-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2017-07-11 |
| First published | 2017-05-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Kalob Porter |
| Maintainers | porterk |
| Keywords | react, map, components, props |

## Links

- npm: https://www.npmjs.com/package/react-map-components
- Repository: https://github.com/PorterK/react-map-components
- Homepage: https://github.com/PorterK/react-map-components#readme
- Issues: https://github.com/PorterK/react-map-components/issues
- npm.io page: https://npm.io/package/react-map-components

## Dependencies (1)

- [filter-invalid-dom-props](https://npm.io/package/filter-invalid-dom-props.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.12 (latest) — 2017-07-11
- 1.0.11 — 2017-07-11
- 1.0.10 — 2017-07-11
- 1.0.9 — 2017-07-11
- 1.0.8 — 2017-05-30
- 1.0.7 — 2017-05-30
- 1.0.6 — 2017-05-30
- 1.0.5 — 2017-05-30
- 1.0.4 — 2017-05-30
- 1.0.3 — 2017-05-30
- 1.0.2 — 2017-05-30
- 1.0.1 — 2017-05-30
- 1.0.0 — 2017-05-30

## README

[![npm version](https://badge.fury.io/js/react-map-components.svg)](https://badge.fury.io/js/react-map-components)
[![Build Status](https://travis-ci.org/PorterK/react-map-components.svg?branch=master)](https://travis-ci.org/PorterK/react-map-components)
[![Code Climate](https://codeclimate.com/github/PorterK/react-map-components/badges/gpa.svg)](https://codeclimate.com/github/PorterK/react-map-components)
# React Map Components
A componentized utility for idiomatically rendering desired components based on an array of objects.

## Example Implementation

```js
  // MainComponent.js

  import React, { Component } from 'react';
  import MapComponents from 'react-map-components';

  import CustomComponent from './CustomComponent';

  export default class MainComponent extends Component {
    render() {
      // NOTE: Generally this data is pulled from the redux store or
      // component state.
      const data = [
        {
          id: 'first',
          name: 'First Data',
          data: 12038123812
        },
        {
          id: 'second',
          name: 'Second Data',
          data: 123123128921
        }
      ];

      return (
        <MapComponents component={CustomComponent} for={data} />
      );
    }
  }

```

```js
// CustomComponent.js

import React, { Component } from 'react';

export default class CustomComponent extends Component {
  render() {
    const { id, name, data } = this.props;

    return (
      <div id={id}>
        <h1>{name}</h1>
        <p>{data}</p>
      </div>
    );
  }
}

```


## Example Migration

Old code

```js
// in render
  const componentsData = [...someData];
  const otherComponentData = [...someOtherData]

  // This example is for a static number of components, we expect the use case
  // will be for a dynamic number of components.

  // Notice that this way of doing things is very bug prone.
  return (
    <div>
      <Component { ...componentsData[0] } />
      <Component { ...componentsData[1] } />
      <Component { ...componentsData[2] } />
    </div>

    <span>
      <OtherComponent { ...otherComponentsData[1] } />
      <OtherComponent { ...otherComponentsData[4] } />
      <OtherComponent { ...otherComponentsData[3] } />
    </span>
  );
```

New code

```js
// before class declaration

import MapComponents from 'react-map-components';

// in render

  // Each array contains multiple objects, each object is a set of props
  // or data to be sent directly to the child components.
  const componentsData = [...someData];
  const otherComponentsData = [...someOtherData];

  // If the wrapper prop is not specified, it defaults to div.
  return (
    <MapComponents component={Component} for={componentsData} />

    <MapComponents
      component={OtherComponent}
      for={otherComponentsData}
      wrapper='span' />
  );
```

---
_Source: https://npm.io/package/react-map-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._