0

I created a jsxUses.js file in the components folder, but when I import it in App.js its shows warning: 'jsxUses' is defined but never used

//This is App.js file
import React, { Component } from 'react';
import './App.css';
import jsxuses from './components/jsxUses';
class App extends Component{
  render() {
    return (
    <div className="App">
      <jsxuses/>
    </div>
    );
  }
}

export default App;

and this is jsxUses.js file

import React from 'react'

const jsxuses = () => {
    return (
        <div>     
            <h1> Hey there!</h1>
        </div>
    );
}
export default jsxuses;
dx4iot
  • 53
  • 1
  • 8

4 Answers4

1

React Element should be PascalCased. So it should be

import JsxUses from './components/jsxUses';

...

<JsxUses />
MjZac
  • 3,476
  • 1
  • 17
  • 28
0

Change your jsxUses.js as:

...
const JsxUses = () => {
...
export default JsxUses;

And your App.js as:

import JsxUses from './components/jsxUses';
...
<JsxUses />

React file structure naming is unopinionated but React elements should be PascalCase for React to know whether or not you're using a function, class or an HTMLelementPascalCased. Look for more here: Is there an official style guide or naming convention for React based projects?

Hope this helps!

MiKr13
  • 1,297
  • 13
  • 20
0

Actually you should avoid using small latter for custom tags.

so you should do 

 const JsxUses = () => {
 ...
 }
 export default JsxUses

and 

import JsxUses from './components/jsxUses';

or if you want to write like -

const jsxuses = () => {
...
}
export default jsxuses

then you should import it like 

import { default as JsxUses } from './components/jsxUses'
Hrishi
  • 1,210
  • 1
  • 13
  • 25
0

Well, Use import JsxUses from './components/JsxUses'; React component name should be PascalCase.

Ibrahim Hossain
  • 51
  • 6
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 24 '22 at 08:08