Develop Reference

How to export multiple components from an index file in React?

Here is my index.jsx file:
import Navbar from './Navbar/Navbar';
import Greeting from './Greeting/Greeting'
import Project from './Project/Project';
import About from './About/About';
import Contact from './Contact/Contact';
import Footer from './Footer/Footer';
export default {
Navbar,
Greeting,
Project,
About,
Contact,
Footer,
};
And my App.jsx file:
import React from 'react';
import {Navbar} from './components';
// import Navbar from './components/Navbar/Navbar';
const App = () => {
return (
<div>
<Navbar />
</div>
)
}
export default App;
When I call to import Navbar through the index.jsx file, I got this error:
Uncaught SyntaxError: The requested module */sre/components/index. isx?
App.isx:4
t=1672200538218' does not provide an export named "Navbar'
What wrong I got if I call Navbar through index file? Thank you so much!
How can I call to import many components througnt index file.

Instead of importing them and then exporting them, you could directly export them as below. But for the above solution to work you should use named exports, like export function Navbar() { instead of
export default function Navbar() {.
export { Navbar } from "./Navbar/Navbar";
export { Greeting } from "./Greeting/Greeting";
export { Project } from "./Project/Project";
export { About } from "./About/About";
export { Contact } from "./Contact/Contact";
export { Footer } from "./Footer/Footer";
But if you would rather keep your default export, you should be doing as below instead of what you have (which I wouldn't prefer, as anyway a named export is way better):
export { defautl as Navbar } from "./Navbar/Navbar";
export { defautl as Greeting } from "./Greeting/Greeting";
export { defautl as Project } from "./Project/Project";
export { defautl as About } from "./About/About";
export { defautl as Contact } from "./Contact/Contact";
export { defautl as Footer } from "./Footer/Footer";
You can learn more about export on mdn.

Trying to read an array from a file in React, but it comes up undefined

I'm new to React and am working on a small project. I'm trying to figure out why React won't read the data from my dataArray.js file. It comes up undefined when I console.log it. I made sure the data was being exported, the data was connected to the App.js file, and I have the data listed in the state.
I'm stumped as to what else to try.
import "./styles.css";
import { receiptsData } from "./dataArray";
import { Component } from "react";
import Receipt from "./components/Receipt";
class App extends Component {
state = {
receiptsData
};
render() {
console.log(receiptsData);
return (
<div className="App">
<Receipt receipts={this.state.receiptsData} />
</div>
);
}
}
export default App;
I have a copy on condesandbox.io: https://codesandbox.io/s/korillaapp-0pm5y3
I know I'm getting other errors as well, but I think it's tied to not being able to read the data from the dataArray.js file.

You have a default export in dataArray.js and named import in App.js.
So or do export const receiptsData = ... in dataArray.js, or import it as import receiptsData from "./dataArray"; in App.js

You exported your array as default export, so it should be imported like this :
import receiptsData from "./dataArray";
Or change your export like this :
export const receipts = [...]

1) Replace Receipt.js with below code
import ReceiptItem from "./ReceiptItem";
const Receipt = (props) => {
const { receipts } = props;
const receiptList = receipts.map((receipt, idx) => {
return(<div>
<ReceiptItem receipt={receipt} key={idx} />
</div>);
});
return (
<div>{receiptList}</div>
)
};
export default Receipt;
2) Add below line of code in the last in ReceiptItem.js
export default ReceiptItem;
3) You have default export receiptsData from dataArray.js so use receiptsData with {} in App.js

React render element is invalid while the import and export seem alright

Export and import of App seem alright. The error must be due to some mixing of names. This is my first react application. I have scoured various StackOverflow posts with the same error but I couldn't extract helpful insight from them. So, please be a bit elaborate.
Error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App.
Index.js :
import App from './App';
ReactDOM.render(<App /> , document.getElementById('root'));
App.jsx :
import React from 'react';
import { StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react';
import Cookies from 'universal-cookie';
import { ChannelListContainer, ChannelContainer } from './components';
const App = () => {
return (
<div className="app__wrapper">
<Chat client={client} theme="team light">
<ChannelListContainer
/>
<ChannelContainer
/>
</Chat>
</div>
);
}
export default App;
index.js in ./components:
export { default as ChannelContainer } from './ChannelContainer';
export { default as ChannelListContainer } from './ChannelListContainer';

Because of you're using:
export { default as ChannelContainer } from "./ChannelContainer";
export { default as ChannelListContainer } from "./ChannelListContainer";
You need to export ChannelContainer from ./ChannelContainer like:
const ChannelListContainer = () => {
return <>ChannelListContainer</>;
};
export default ChannelListContainer;
And export ChannelListContainer from ./ChannelListContainer like:
const ChannelContainer = () => {
return <>ChannelContainer</>;
};
export default ChannelContainer;
Here's the sample based on your structure:

Exporting multiple components through HOC from a single ES6 module

I'm used to writing my React components in a fashion similar to this:
import React, { Component } from 'react';
import withStyles from 'react-jss';
const styles = theme => ({
// my styles
});
class MyComponent extends Component {
render() {
// my render function
}
};
export default withStyles(styles)(MyComponent);
I'm trying to add a second component in this same file. I would like to have it in the same file for reasons*. I defined the class MyComponent2 in pretty much the same way, but now I don't know how I should export it, considering that also MyComponent2 must be decorated with the withStyles HOC.
Here is what I tried (it's marked as an error):
export withStyles(styles)(MyComponent2);
export const withStyles(styles)(MyComponent2);
export const MyComponent2 = withStyles(styles)(MyComponent2); // of course I'm redefining MyComponent2
^* I know I could just put it in another file, but I want to know how to do this in case some day I have very compelling reasons.

I guess you'll want to use
import React, { Component } from 'react';
import withStyles from 'react-jss';
const styles = theme => ({
// my styles
});
export const MyComponent1 = withStyles(styles)(class extends Component {
render() {
// my render function
}
});
export const MyComponent2 = withStyles(styles)(class extends Component {
render() {
// my render function
}
});

I'd go with:
export const MyComponent = withStyles(class MyComponent extends Component {
render() {
// my render function
}
});
That way, the names don't clash as the class is a class expression and not a class declaration.
for reasons*
I can't think of any. It makes sense to split the components into multiple files.

You can have multiple named exports per file.
export const Component1 = withStyles(styles)(MyComponent1);
export const Component2 = withStyles(styles)(MyComponent2);
// or
export default {
MyComponent1 : withStyles(styles)(MyComponent1),
MyComponent2 : withStyles(styles)(MyComponent2)
}

react class isn't being exported and I can't figure out why?

I can't get this react class to export and I can't figure out why. I have the export class at the bottom and everything is extending what it should. Is it my withRouter method?
import React, {Component} from 'react';
import {HeaderAdmin} from '../headerAdmin';
import {DashBoxes} from './dashBoxes';
import {MetaData} from '../metaData';
import {withRouter} from 'react-router-dom';
class CoachDashMain extends Component {
render() {
return(
<div>
<HeaderAdmin />
<DashBoxes />
<MetaData />
</div>
);
}
}
export default withRouter(CoachDashMain);
the error I'm getting is ./components/Coach/coachDashMain' does not contain an export named 'CoachDashMain'.
the import in another file looks like:
import {CoachDashMain} from './components/Coach/coachDashMain'

You are using named imports: import { CoachDashMain } from '...', which gives the above error unless you have export class CoachDashMain ... in that file.
Since you are using export default ..., you should import it by:
import CoachDashMain from '...'; // `CoachDashMain` can be renamed to anything

When you default export the class, you don't need the curly braces while importing that class in another file.
So, you should import like:
import CoachDashMain from './components/Coach/coachDashMain';