react-map-components v1.0.12

React Map Components

A componentized utility for idiomatically rendering desired components based on an array of objects.

Example Implementation

  // 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} />
      );
    }
  }

// 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

// 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

// 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' />
  );