appendComponentClass.js

import React from 'react';

// API Refrences
// React.cloneElement https://reactjs.org/docs/react-api.html#cloneelement
// React.Children.map https://reactjs.org/docs/react-api.html#reactchildrenmap

const AppendClass = ({ children, newClass = '' }) => {
  return React.Children.map(children, child => {
    const modifiedProps = {
      ...child.props,
      className: child.props.className // check to preserve the classNames already applied
        ? `${child.props.className} ${newClass}`
        : newClass,
    };
    return React.cloneElement(child, modifiedProps);
  });
};
export default AppendClass;

Usage is to add a class to a child component inline without modifying the existing component code.

It takes the child component it's wrapped around and spits out a clone with the appended className prop added. No extra

added to the DOM just the cloned component.

example:

<AppendClass newClass="whatever">
  <MyComponent/>
</AppendClass>