Unable to render component in react

Question

I've tried to render a simple component but cant seem to make it work.

<Col md={{ span: 16, offset: 4 }} xs={{ span: 20, offset: 2 }}>
    {props.language === "en" ? <englishReport /> : <danishReport />}
</Col>

This is what <englishReport/> component and <danishReport/> looks like

import React, { Component } from 'react';

class indexDanish extends Component {
    render() { 
        return ( 
             <div style={{ color: "#fff", textAlign: "left" }}>
                 <b>hej</b>
             </div>
         );
    }
}

export default indexDanish;

I have imported both components in the parent component

Answer 1

A custom component name needs to start with a capital letter, or Babel will treat that as a string.

Change the englishReport and danishReport names to EnglishReport and DanishReport and it will work.

<Col md={{ span: 16, offset: 4 }} xs={{ span: 20, offset: 2 }}>
  {props.language === "en" ? <EnglishReport /> : <DanishReport />}
</Col>