CODEWITHSUNDEEP
reactjs
Rahul Goswami
Rahul Goswami

Reputation: 34

I have a simple code for reactjs but is showing is declared but its value is never read

welcome.js 
import React, { Component } from 'react'
class welcome extends Component
{
    render()
   {
       return <h1>Class Component</h1>
   }
}
export default welcome


App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import welcome from './components/welcome'
function App() {
  return (
    <div className="App">
      <Greet />
      <welcome />
    </div>
  );
}

export default App;

So basically in welcome.js i have a code for rendering hello rahul and i have exported that and i have imported that in App.js but it showing welcome is declared but never used please help

Upvotes: 0

Views: 65

Answers (2)

Hadi Pawar
Hadi Pawar

Reputation: 1126

You are importing a component in lower case letters. React doesn't recognize that as a component. So just restructure it as :

import Welcome from './components/Welcome'

then do <Welcome/>

Upvotes: 0

Adam Jeliński
Adam Jeliński

Reputation: 1788

You have a problem with naming. React assumes every tag beginning with a small letter is native (f ex a <div> or <table>). You have to name your own components with capital letters.

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome'
function App() {
  return (
    <div className="App">
      <Greet />
      <Welcome />
    </div>
  );
}

export default App;

It's also a good idea to name your files with components with capital letters, to make them easy to identify.

Upvotes: 1

Related Questions