How to export function and import react hooks - reactjs

Question

I know and know how to do it but it causes problems for me
I just want to import the functions {OnSubmitLog_In and username} and maybe more how to listing it right is not going to make it a problem
2 js files
the first is imports like this
import * as Login from './log_in';
import { OnSubmitLog_In, username } from './log_in';
In the second file
async function OnSubmitLog_In(e) {
e.preventDefault();
var data = { username, password }
await axios.post("http://localhost:4000/users/signin", data, {
}).then((response) => {
if (localStorage.getItem('token', response.data.accessToken)) {
alert('user alredy in')
} else {
alert('hellow ' + data.username)
localStorage.setItem('token', response.data.accessToken)
console.log('response data', response.data)
console.log('response config', response.config.data)
}
}, (error) => {
console.log('error', error)
if (405) {
alert('user not found')
} else if (500) {
alert('user not found try again')
}
});
}
export default Log_In;
this is the error
./src/NAVBAR/nav.js
Attempted import error: 'OnSubmitLog_In' is not exported from './log_in'.

Answer 1

You are exporting as default, you should import like this,
import OnSubmitLog_In from './log_in'; //Not sure about username
Update
To import everything from a single file as,
import * as Login from './log_in'
You need to export everything as named export from log_in file.
For example, this is my log_in file,
import React from 'react'
export const MyComponent = () => {
return <div>Component 1</div>
}
export const MyComponent2 = () => {
return <div>Component 2</div>
}
Now you can use those components in parent component like,
<Login.MyComponent />
<Login.MyComponent2 />
Demo

Answer 2

You should export you functions in an object to import them the way you do.
Like this:
async function OnSubmitLog_In(e) {
e.preventDefault();
var data = { username, password }
await axios.post("http://localhost:4000/users/signin", data, {
}).then((response) => {
if (localStorage.getItem('token', response.data.accessToken)) {
alert('user alredy in')
} else {
alert('hellow ' + data.username)
localStorage.setItem('token', response.data.accessToken)
console.log('response data', response.data)
console.log('response config', response.config.data)
}
}, (error) => {
console.log('error', error)
if (405) {
alert('user not found')
} else if (500) {
alert('user not found try again')
}
});
}
export {
OnSubmitLog_In
};

Answer 3

You have to import code as below.
import OnSubmitLog_In, { username } from './log_in';
Here you are exporting as default. If you remove default then you have to write code as below.
import { OnSubmitLog_In, username } from './log_in';