Expected behavior

Conditional rendering has to happen properly.

Actual behavior

When try to return DOM elements inside the MDBCardFooter component nothing is rendering, showing empty DOM element instead.

If it's a simple text the DOM is getting rendered, otherwise not.

<MDBCardFooter>Sample text is getting rendered...</MDBCardFooter>

But not the below code

Resources (screenshots, code snippets etc.)

    var data = [{
        "type": "text",
        "text": "sslskdjf laskdj lakkjd l;aieujdf;lwkasdclaksdliwaelkcn als kldakjsd lkasjdlajeksdx.,kan sL,dna"
    }, {
        "type": "text",
        "text": "kldakjsd lkasjdlajeksdx.,kan sL,dna"
    }, {
        "type": "text",
        "text": "sslskdjf laskdj lakkjd l;aieujdf;lwkasdclaksdliwaelkcn als kldakjsd lkasjdlajeksdx.,kan sL,dna"
    }, {
        "type": "text",
        "text": "kldakjsd lkasjdlajeksdx.,kan sL,dna"
    }
];

<MDBCardFooter>
    {
        data.map((d, di) => {
            return (
                <div key={di}>
                    <span>{d.type}</span>
                    <span>{d.text}</span>
                </div>
            );
        })
    }
</MDBCardFooter>

Please check this

Thanks :)