I imported jsx files but can't use/ import it in ReactJS [closed]

Question

I use these 2 classes :

auth.js

import React from 'react';
import log from './../components/log/';

const auth = () => {
    return (
        <div className='authPage'>
            <log />
        </div>
    );
};

export default auth;

index.js:

import React, { UseState } from 'react';
import signInForm from './signInForm';
import signUpForm from './signUpForm';

const log = () => {
...
};

export default log;

but I can't use log in auth.js, path is ok, name is ok, but i can't use it.

I never had this problem before and can't find anything on it pls if it happened to someone help me to solve this pls.

ESLint says: 'log' is defined but never used no-unused-vars, for the file auth.js but as you can see I am trying to use it

Answer 1

React components should start with uppercase letter. Try:

import React from 'react';
import Log from './../components/log/';

const Auth = () => {
    return (
        <div className='authPage'>
            <Log />
        </div>
    );
};

export default auth;

and export as

const Log = () => {
...
};

export default Log;