CODEWITHSUNDEEP
reactjsreact-nativecomponentsexport
roz333
roz333

Reputation: 715

import and export multiple components via functional components

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?

Upvotes: 0

Views: 2010

Answers (3)

Andrew - oahehc
Andrew - oahehc

Reputation: 546

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';

Upvotes: 0

crrmacarse
crrmacarse

Reputation: 1246

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

Upvotes: 1

Anthony Marino
Anthony Marino

Reputation: 97

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

Upvotes: 0

Related Questions