title: ReactJS: How to add a className to a child component
body: <p>I'm trying to add a class name to a child component, preserving the original classes that may be set to the component.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>import React, { Component } from "react";
  import PropTypes from "prop-types";
  
      class ClassExtender extends Component {
          getChildrenWithProps = () =&gt; {
              let addedClass = "my-new-css-class-name";
  
              return React.Children.map(this.props.children, child =&gt; 
                  React.cloneElement(child, { className: [child.className, addedClass] })
              );
          };
  
          render = () =&gt; {
              return this.getChildrenWithProps();
          };
      }
  
      export default ClassExtender;
  </code></pre>
  
  <p>I'm getting a wrong result when my component renders:</p>
  
  <pre><code>&lt;div class=",my-new-css-class-name"&gt;Test&lt;/div&gt;
  </code></pre>
  
  <p>That points to two possible problems:</p>
  
  <ol>
  <li>The comma may indicate I need to change code to <code>React.cloneElement(child, { className: child.className + " " + addedClass });</code>. That is a easy step.</li>
  <li><code>child.className</code> is returning <code>null</code>. How can I retrieve the current classe(s) attached to the child component ?</li>
  </ol>