'is defined but never used no-unused-vars', is defined but never used no-unused-vars

Question

I'm starting a small react project (beginner) and when I cut my 'App' component into many small components, such as 'header', it doesn't work. The error started to happen as soon as I cut my header. And to say that the header css doesn't load either. You can see in the element inspector that the React component is present, but it doesn't want to load the css associated with it.

// In App.js

import React from 'react';
import header_type from './header';


class App extends React.Component {
    render() {
        return (

                <div className="window">
                    <div className="window-body">
                        <header_type/>
                    <div className='window_inner'>
                        <div className="column_left">
                        </div>
                        <div className="column_right">
                        </div>
                    </div>
                    </div>
                </div>


        )
    }
}

export default App;

// In header.js

class header_type extends React.Component {
    render() {
        return (

            <div className="window-header" >
            </div>


        )
    }
}

export default header_type;

// In index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/components/App';
import '../src/style/window.css';

 ReactDOM.render(

 <App />, document.getElementById('root')

);

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

WARNING in src\components\App.js
  Line 2:10:  'header_type' is defined but never used  no-unused-vars

webpack compiled with 1 warning

Thank you in advance for the answers. Have a nice day.

Answer 1

one issue that is present in the above is code is you are exporting a default component from header.js, and importing it as named export in App.js.

In your App.js while importing header component import it as import header_type from './header';

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export