React - Child not rendered correctly

Question

I can't see the text inside the child component. The child is rendered with size 0x0 and empty.

Is that caused by react router?

this is my code:

App.js:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import home from './pages/home/home';
import repoDetails from "./pages/repoDetails/repoDetails";

export default class App extends Component {
  render() {
      return (
              <Router>
                  <Switch>
                      <Route exact path="/" component={home}/>
                      <Route path="/:owner/:repo" component={repoDetails}>
                      </Route>
                  </Switch>
              </Router>
      );}}

repoDetails.js:

import React, {Component} from 'react';
import committersCard from '../../components/committersCard.js'

export default class repoDetails extends Component {

render() {
    return (
        <div>
            <committersCard/>
        </div>
    )}}

This is the child committersCard.js:

import React, {Component} from 'react';
export default class committersCard extends Component {

render() {
    return (

        <div style={{height: '150px', width: '200px'}}>
            <h1>TEXT INSIDE THE CHILD COMPONENT</h1>
        </div>
    );}}

I'm using react router 4.

Possible duplicate of [Why do components in react need to be capitalized?](https://stackoverflow.com/questions/33259112/why-do-components-in-react-need-to-be-capitalized) — Gabriele Petrioli, Oct 09 '18 at 09:03

You Nguyen · Answer 1 · 2018-10-09T09:03:37.867

Your custom element must start with an upper-case letter and your class name is also supposed to start with an upper-case

repoDetails.js:

import React, {Component} from 'react';
import CommittersCard from '../../components/committersCard.js'

export default class RepoDetails extends Component {

render() {
    return (
        <div>
            <CommittersCard />
        </div>
    )}}

committersCard.js

import React, {Component} from 'react';
export default class CommittersCard extends Component {
render() {
    return (
        <div style={{height: '150px', width: '200px'}}>
            <h1>TEXT INSIDE THE CHILD COMPONENT</h1>
        </div>
    );}}*

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import home from './pages/home/home';
import RepoDetails from "./pages/repoDetails/repoDetails";

export default class App extends Component {
  render() {
      return (
              <Router>
                  <Switch>
                      <Route exact path="/" component={home}/>
                      <Route path="/:owner/:repo" component={RepoDetails} /> //fixed
                      </Route>
                  </Switch>
              </Router>
      );}}

The reason is:

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

According to User-Defined Components Must Be Capitalized

score 1 · Answer 2 · answered Oct 09 '18 at 09:02

If you are going to use custom components, they MUST start with a capital letter.

From the official docs

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.

You can read more about the reasoning behind this convention here.

So, replace the names of your components with:

import React, {Component} from 'react';
import CommittersCard from '../../components/CommittersCard.js'

export default class RepoDetails extends Component {

render() {
    return (
        <div>
            <CommittersCard/>
        </div>
    )}}

and

import React, {Component} from 'react';
export default class CommittersCard extends Component {

render() {
    return (

        <div style={{height: '150px', width: '200px'}}>
            <h1>TEXT INSIDE THE CHILD COMPONENT</h1>
        </div>
    );}}

@robo you are very welcome. I suggest always following the official docs, it will save you lots of time and will help you keep to React standards to avoid simple issues like this. — c-chavez, Oct 09 '18 at 09:12

score 0 · Accepted Answer · answered Oct 09 '18 at 09:05

0

Rule of thumb: Every Component name should start with an uppercase

answered Oct 09 '18 at 09:05

mr L

1,008
13
20

React - Child not rendered correctly

3 Answers3