I usually export the components by this way:
export {Login} ;
Then import them in index.js file by this way:
export * from './login';
Then import them in each screen i want by this way :
import {Login, Header, Footer} from './index.js'
Now i am using redux in my project and i should use connect when i export my components by this way:
export default connect(mapStateToProps, {emailChanged})({Login});
But i am getting following error
How should i export Logincomponent ? ( Please keep in your mind i need to use index.js file to export my components, then i can not export them separately)
If u want specific name for the Component. you can create const and pass it in export.
const LoginComponent = connect(mapStateToProps, {emailChanged})({Login});
export { LoginComponent };
Related
how to use import statement to import functions from one component to other component.
Below is how the import statement is:
import Tool from '../Common';
import { ToolContextProvider } from '../Common';
This complaint of duplicate lines. So I have tried something like below,
import { ToolContextProvider, Tool} from '../Common';
But this doesn't seem to be correct. How can write this in one line.
Could someone help me with this? Thanks.
basically there are two different type of export in javascript modules (also react included):
default export
named export
default export would be like :
// someFile.js
export default SomeComponent
named export would be like
// someFile.js
export SomeOtherComponent
importing them in other components for using them should be like:
// useCase.js
import SomeComponent from './someFile' // for default export
import { SomeOtherComponent } from './someFile' // for named export
import SomeComponent, { SomeOtherComponent } from './someFile' // for using both
You can import like this. Just combine both of them.
import Tool, { ToolContextProvider } from '../Common';
I have created a file named index.jsI am going to use this file as main importing and exporting file
I have two components including login and header in my project and i have exported them as following method at end of each file:
export {Login};
export {Header};
Then i exported both of them in index.js as following method:
export * from './login';
export * from './header';
And at the end i have imported both of them in App.js by this method:
import {Login, Header} from './components/index';
It doesn't work and i am getting error :
Invariant violation:Element type is invalid.
Does anybody knows which part i made mistake?
If you really want to achieve what you wanted. You could instead:
export default Login;
export default Header;
on each files and import it on your index.js
import Login from './login';
import Header from './header';
...
export {
Login,
Header
}
import {Login, Header} from './components'; // you could eliminate the index
If you are using class style components, you can do
class Login extends Component {
render() {
return(
<Text> Text and other tags here </Text>
)
}
}
export default Login;
Then in your App.js
import Login from '../components/Login.js'; //or wherever this component lives
Assume our folder structure looks like this.
|- elements
|- Login.js
|- Header.js
|- index.js
|- components
|- App.js
1.export the components
// ./elements/Login.js
export { Login };
// ./elements/Header.js
export { Header };
2.import and export all the components in index.js
// ./elements/index.js
export { Loading } from './Login';
export { Header } from './Header';
import in any file we need
// ./components/App.js
import { Login, Header } from '../elements';
I am trying to learn redux and I have a file with an action in it.
export const changeTitle = () => {
return {
type: 'CHANGE_PROJECT_TITLE',
};
};
Then I am trying to import it in a component.
import changeTitle from '../actions/index.js';
This works if I use export default in the action file but then I can only have one action.
export default changeTitle;
I am trying to figure out why it will not work without the the export default.
When I try without the export default I get an error that says : "Attempted import error: '../actions/index.js' does not contain a default export (imported as 'changeTitle')." I believe I have seen examples that work without the default export so they can use multiple actions.
in your case just change
import changeTitle from '../actions/index.js';
to
import { changeTitle } from '../actions/index.js';
and you can omit index.js name in import, it's default file for import
import { changeTitle } from '../actions';
more information about export you can find on mdn
Working on react application in TypeScript.
I'm trying to understand the correct syntax for exporting a default component using as
Up till now I've used:
class HomePage extends Component<IProps, IState> {
...
}
export default HomePage
or in shortly:
export default class HomePage extends Component<IProps, IState> {
...
}
now, after adding redux support. I have something like:
class HomePage extends Component<IProps, IState> {
...
}
const mapStateToProps = (state: StoreState) => {
...
};
const mapDispatchToProps = {
...
};
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);
but I can't figure it out how to add as to the connect default export
e.g something like:
// This is NOT working. I get Syntax error.
export default connect(mapStateToProps, mapDispatchToProps)(HomePage) as HomePage;
is it possible? or should I do it? it's seems that anyway the export name is HomePage (when I'm importing HomePage in other file, the IDE is automatically detects and import this file). Where is it taken from? the name of the file (HomePage.tsx)?
This is do work for me:
const connectedHomePage = connect(mapStateToProps, mapDispatchToProps)(HomePage)
export {connectedHomePage as HomePage};
but it's two lines (I prefer in one line) and it's not a default export.
so, is there a way to export default AND adding as to the statement? just so it will be clear what is the exported name?
as has 2 meanings. In ES6 modules, it can be a way to rename an import or export. In TypeScript, it is a typecast operator. I am going to assume you mean the first, specifically a way to rename an export.
Now take a look at this expression you suggested:
export default connect(mapStateToProps, mapDispatchToProps)(HomePage) as HomePage;
Do you want to export it as default or do you want to export it as HomePage? When you export default, default is the export name. Given that, does this make sense to expect it to be called HomePage? You either export something that is called default or something that is called HomePage.
This table associates different export statement forms with the expected export name and local names:
For importing, though...
If you are importing a default export, you have to explicitly name the import. Default exports will not automatically have a local name after importing. Example: import express from "express". The local name does not matter. Could as well be import banana from "express".
If you are importing a named export, by default, the local name will be the same as the exported name. Example: If you have export const x = 2, then, you should import it as import { x } from "module". You can also rename the import like this: `import { x as y } from "module".
The above tables are from the ES6 specs: http://www.ecma-international.org/ecma-262/6.0/
I am receiving the following error when trying to run my React app:
./src/components/App/App.js
Attempted import error: 'combineReducers'
is not exported from '../../store/reducers/'.
Here's how I'm exporting combineReducers:
import { combineReducers } from 'redux';
import userReducers from './userReducers';
import articleReducers from './articleReducers';
export default combineReducers({
userReducers,
articleReducers
});
and here's how I'm importing it in App.js:
import { combineReducers } from '../../store/reducers';
What's incorrect in how I'm exporting combineReducers?
import { combineReducers } from '../../store/reducers';
should be
import combineReducers from '../../store/reducers';
since it's a default export, and not a named export.
There's a good breakdown of the differences between the two here.
i had the same issue, but I just typed export on top and erased the default one on the bottom. Scroll down and check the comments.
import React, { Component } from "react";
export class Counter extends Component { // type this
export default Counter; // this is eliminated
I guess I am coming late, but this info might be useful to anyone I found out something, which might be simple but important.
if you use export on a function directly i.e
export const addPost = (id) =>{
...
}
Note while importing you need to wrap it in curly braces
i.e. import {addPost} from '../URL';
But when using export default i.e
const addPost = (id) =>{
...
}
export default addPost,
Then you can import without curly braces i.e.
import addPost from '../url';
export default addPost
I hope this helps anyone who got confused as me. 🙂
This is another option:
export default function Counter() {
}
Take into consideration that if you are using a named export you don't need curly brackets:
export const Component
->
import {ComponentName}
Only the default exported component be imported with curly brackets:
export default
->
import ComponentName
Maybe i'm late too but i had a similar problem with folders inside of component folder. i changed the folder's name with Capital letter. it worked for me.
If changing the import doesn't help maybe you just need to run yarn install or npm install (or whatever you're using) and restart your server. Worked for me.
Be sure to Capitalize the name of the constant variable you're exporting inside the component. When you Import the component elsewhere you should also check that its first letter is capitalized since this is one of the ways React uses to identify its components.
inside component:
import React from 'react';
export const Component = (props) => (...)
And then, when importing:
import {Component} from '../location/file'
Consider checking for any file renamings that git hasn't been instructed to track with git mv