Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react component display error ( no-unused-vars)

I tried to create A component containing some text and I wanted to display it by importing the text.js (React) file it is contained in, into the App component in the app.js file.

Here is my app.js file code:

    import './App.css';
    import text from './text';

    function App() {
      return (
        <div className="App">
          <p>hello</p>
          <text></text>
        </div>
      );
    }

export default App;

Here is my text.js file (component) code:

    import React from 'react'
    export default function text() {
      return (
        <div>
          <h1>Hey</h1>
        </div>
      )
    }

However, I get the below error:

[eslint]
srcApp.js
  Line 3:8:  'text' is defined but never used  no-unused-vars 

Search for the keywords to learn more about each warning.     
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint]
srcApp.js
  Line 3:8:  'text' is defined but never used  no-unused-vars 

webpack compiled with 1 warning

I could not get "hey" to display on my web page. It only displays "hello". How can I fix this and get the text from both components to display on the web page?

Tags:

2

Answers


  1. 0

    React components must start with a capital letter. Anything used in the JSX with a lowercase first letter is treated as an HTML tag, so it does not actually reference your component. Hence, your linting rules correctly point out that the "text" component isn’t being consumed.

    import React from 'react'
export default function Text() { // Renaming this to Text doesn't really matter in your case as you are using default exports. What matters is it is capital at the point of import. However, it is good practice to be consistent.
  return (
    <div>
      <h1>Hey</h1>
    </div>
  )
}

    import './App.css';
import Text from './text';

function App() {
  return (
    <div className="App">
      <p>hello</p>
      <Text />
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    React components must start with a capital letter. And Eslint is only notifying you about an unused import, which is not a bug.

    import './App.css';
import Text from './text';

function App() {
  return (
    <div className="App">
      <p>hello</p>
      <Text />
    </div>
  );
}

    import React from 'react'
// change text to Text
export default function Text() {
  return (
    <div>
      <h1>Hey</h1>
    </div>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search