JavaScript ReactJS: How to add a className to a child component

I'm trying to add a class name to a child component, preserving the original classes that may be set to the component.

Here is the code:

import React, { Component } from "react";
import PropTypes from "prop-types";

    class ClassExtender extends Component {
        getChildrenWithProps = () => {
            let addedClass = "my-new-css-class-name";

            return React.Children.map(this.props.children, child => 
                React.cloneElement(child, { className: [child.className, addedClass] })
            );
        };

        render = () => {
            return this.getChildrenWithProps();
        };
    }

    export default ClassExtender;

I'm getting a wrong result when my component renders:

<div class=",my-new-css-class-name">Test</div>

That points to two possible problems:

The comma may indicate I need to change code to React.cloneElement(child, { className: child.className + " " + addedClass });. That is a easy step.
child.className is returning null. How can I retrieve the current classe(s) attached to the child component ?

Answer:1

How to distribute parent element's width among child element

I am using twitter bootstrap for a site and basically I have a order list within a div element. When the screen get resized to 768px, I want parent's div width, equally distributed among all child ...

how code splitting works with import/export and babel and webpack?

I am trying to answer, when to use import/export and when to use require()/module.exports? But as I try to dig, it seems to get complicated. Here's my understanding require()/module.exports: this ...

how code splitting works
how webpack code splitting works

Is ReplaySubject(1) the same as AsyncSubject()?

I'm currently using this to perform notifications: /** * Create notifications that broacast * the entire set of entries. */ protected notify = new ReplaySubject<E[]>(1); IIUC I ...

Await used after promise initialized

I would like to connect mongoDb and execute code asynchronously. async function test() { let task = asyncTask() //return a promise //function still running await task //code executed ...