CODEWITHSUNDEEP
javascriptreactjs
Nipun Ravisara
Nipun Ravisara

Reputation: 4451

React component rendering only component tag

It loads index.html successfully with no js errors but nothing is rendered to the page. Nothing rendering in the webpage. it only shows tag when I inspect the webpage. I have a component called "list".

list.js

import React, { Component } from "react";

class list extends Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
        <h1>Hello</h1>
      </div>
    );
  }
}

export default list;

I imported it on App.js 

import React, { Component } from "react";
import "./App.css";
import list from "./components/list";

class App extends Component {
  render() {
    return (
      <div className="App">
        <list />
      </div>
    );
  }
}

export default App;

enter image description here

Upvotes: 3

Views: 174

Answers (3)

Zeyad Etman
Zeyad Etman

Reputation: 2540

User-Defined Components Must Be Capitalized

Because it's not capitalized, the renderer takes the list tag as an HTML tag. Not as a React Component.

Upvotes: 7

Mithila Eranda
Mithila Eranda

Reputation: 431

In you, App.js capitalized your List in your third line and tenth line.and also you can use eslint-config-airbnb to find this kind of error.

(eslint-config-airbnb is npm preset)

more details - https://www.npmjs.com/package/eslint-config-airbnb

Upvotes: 0

tnkh
tnkh

Reputation: 1839

In you App.js, capitalized your List in your third line and tenth line.

Upvotes: 2

Related Questions