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

Tholle · Accepted Answer · 2019-03-19 14:50:20Z

6

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>

answered Mar 19, 2019 at 14:50

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to render component in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related