CODEWITHSUNDEEP
reactjsimportcomponents
Alexander
Alexander

Reputation: 1378

I cannot import components in React

Hi guys this is my App file:

import React, { Component } from 'react';
import test2 from './test2';
import './App.css';

class App extends Component {
  render() {
    return <test2 />;
  }
}
export default App;

and this is my test2 component :

import React, { Component } from 'react';

class test2 extends Component {
  render() {
    return <div>hello</div>;
  }
}
export default test2;

but for some reason I cannot see it in my app component, does anyone see the error? this is what I get: 'test2' is declared but its value is never read. [6133]

Upvotes: 0

Views: 1230

Answers (2)

Felix Kling
Felix Kling

Reputation: 816424

That's a linter warning. With JSX, custom component "tags" must start with a capital letter. Lower case tag names are treated as strings.

<test2 />

is equivalent to

React.createElement("test2", null);

I.e. this will pass the string value "test2", not resolve to the variable test2.

You want

import Test2 from '...';
// ...
<Test2 />

which is equivalent to

React.createElement(Test2, null);

See the documentation for more info.

Upvotes: 3

Anil Kumar
Anil Kumar

Reputation: 2309

Components Should be names starting with capital letters else it will be considered as html tags like h2. p etc...

class Test2 extends Component {
 render() {
   return <div>hello</div>;
}
}

export default Test2;

Upvotes: 1

Related Questions