How to use the reactstrap/lib/utils.mapToCssModules function in reactstrap

render() {
    const { className, cssModule, header, mainText, icon, color, children, variant, ...attributes } = this.props;

    // demo purposes only
    const padding = (variant === '0' ? { card: 'p-3', icon: 'p-3', lead: 'mt-2' } : (variant === '1' ? {
      card: 'p-0', icon: 'p-4', lead: 'pt-3',
    } : { card: 'p-0', icon: 'p-4 px-5', lead: 'pt-3' }));

    const card = { style: 'clearfix', color: color, icon: icon, classes: '' };
    card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);

    const lead = { style: 'h5 mb-0', color: color, classes: '' };
    lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead);

    const blockIcon = function (icon) {
      const classes = classNames(icon, 'bg-' + card.color, padding.icon, 'font-2xl mr-3 float-left');
      return (<i></i>);
    };

    return (
      
        
          {blockIcon(card.icon)}
          <p>{header}</p>
          <p>{mainText}</p>

render() {
    const {className, cssModule, header, icon, color, value, children, invert, ...attributes} = this.props;

    // demo purposes only
    const progress = {style: "", color: color, value: value};
    const card = {style: "", bgColor: "", icon: icon};

    if (invert) {
      progress.style = "progress-white";
      progress.color = "";
      card.style = "text-white";
      card.bgColor = 'bg-' + color;
    }

    const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
    progress.style = classNames("progress-xs mt-3 mb-0", progress.style);

    return (
      
        
          <div>
            <i></i>
          </div>
          <div>{ header }</div>
          <small>{ children }</small>
          <progress value="{" color="{">
        </progress>
      
    )
  }
}

} = this.props

    // demo purposes only
    const padding =
      variant === '0'
        ? { card: 'p-3', icon: 'p-3', lead: 'mt-2' }
        : variant === '1'
          ? {
            card: 'p-0',
            icon: 'p-4',
            lead: 'pt-3'
          }
          : { card: 'p-0', icon: 'p-4 px-5', lead: 'pt-3' }

    const card = { style: 'clearfix', color: color, icon: icon, classes: '' }
    card.classes = mapToCssModules(
      classNames(className, card.style, padding.card),
      cssModule
    )

    const lead = { style: 'h5 mb-0', color: color, classes: '' }
    lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead, 'text-capitalize')

    const blockIcon = function (icon) {
      const classes = classNames(
        icon,
        'bg-' + card.color,
        padding.icon,
        'font-2xl mr-3 float-left'
      )
      return <i>
    }</i>

render() {
    const {className, cssModule, header, mainText, icon, color, footer, link, children, variant, ...attributes} = this.props;

    // demo purposes only
    const padding = (variant === '0' ? {card: "p-3", icon: "p-3", lead: "mt-2"} : ( variant === "1" ? {
      card: "p-0", icon: "p-4", lead: "pt-3" } : {card: "p-0", icon: "p-4 px-5", lead: "pt-3"}));

    const card = {style: "clearfix", color: color, icon: icon, classes: ""};
    card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);

    const lead = {style: "h5 mb-0", color: color, classes: ""};
    lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead);

    const blockIcon = function (icon) {
      const classes = classNames(icon, 'bg-' + card.color, padding.icon, "font-2xl mr-3 float-left");
      return (<i></i>);
    };

    const cardFooter = function () {
      if (footer) {
        return (
          
            <a href="{link}">View More
              <i></i></a>

render() {
    const {className, cssModule, header, mainText, smallText, color, value, children, variant, ...attributes} = this.props;

    // demo purposes only
    const progress = {style: "", color: color, value: value};
    const card = {style: "", bgColor: ""};

    if (variant === "inverse") {
      progress.style = "progress-white";
      progress.color = "";
      card.style = "text-white";
      card.bgColor = 'bg-' + color;
    }

    const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
    progress.style = classNames("progress-xs my-3", progress.style);

    return (
      
        
          <div>{ header }</div>
          <div>{ mainText }</div>
          <progress value="{" color="{">
          <small>{ smallText }</small>
          <div>{children}</div>
        </progress>
      
    )
  }
}

const data = dataBox();
    const variant = data.variant;

    if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) {
      return (null);
    }

    const back = 'bg-' + variant;
    const icon = 'fa fa-' + variant;
    const keys = Object.keys(data);
    const vals = Object.values(data);

    const classCard = 'brand-card';
    const classCardHeader = classNames(`${classCard}-header`, back);
    const classCardBody = classNames(`${classCard}-body`);
    const classes = mapToCssModules(classNames(classCard, className), cssModule);

    return (
      <div>
        <div>
          <i></i>
          {children}
        </div>
        <div>
          <div>
            <div>{vals[1]}</div>
            <div>{keys[1]}</div>
          </div>
          <div>
            <div>{vals[2]}</div>
            <div>{keys[2]}</div>
          </div></div></div>

const data = dataBox();
    const variant = data.variant;

    if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) {
      return (null);
    }

    const back = 'bg-' + variant;
    const icon = 'fa fa-' + variant;
    const keys = Object.keys(data);
    const vals = Object.values(data);

    const classCard = 'brand-card';
    const classCardHeader = classNames(`${classCard}-header`, back);
    const classCardBody = classNames(`${classCard}-body`);
    const classes = mapToCssModules(classNames(classCard, className), cssModule);

    return (
      <div>
        <div>
          <i></i>
          {children}
        </div>
        <div>
          <div>
            <div>{vals[1]}</div>
            <div>{keys[1]}</div>
          </div>
          <div>
            <div>{vals[2]}</div>
            <div>{keys[2]}</div>
          </div></div></div>