How to structure component export without export default? - reactjs

Question

I am trying not to use export default in my components but rather export function..
My components are structured something like this:
function Hero(props) {
return (
<section className="hero">
<div className="wrapper">
<div className="content">
<h1>{props.title}</h1>
<p>{props.text}</p>
</div>
</div>
</section>
);
}
export default Hero;
when I do import {Hero} from './components/hero/hero.js' it works ok for this component, however if I have a component that is receiving props. Like this, it does not work:
export function Chart() {
return (
<section className="chart">
<div className="wrapper">
<h2>{this.props.children}</h2>
<div className="img-container">
<img className="desktop" src={chart} />
<img className="mobile" src={mobileChart} />
</div>
</div>
</section>
);
}
I am trying to avoid export default and avoid using something like
class Chart extends React.Component {
render() {
return (
<section className="chart">
<div className="wrapper">
<h2>{this.props.children}</h2>
<div className="img-container">
<img className="desktop" src={chart} alt="Mortgage Rate Comparison Chart"/>
<img className="mobile" src={mobileChart} alt="Mortgage Rate Comparison Chart"/>
</div>
</div>
</section>
);
}
}
export default Chart;
When I try to switch this I am getting an error, i'm not sure the proper syntax for exporting this way. It was a request made by my lead dev and he is out of office this week.

Answer 1

When you have one model per module, default exports are preferred as per ECMAScript
If your code is like this in the file:
ChartComponent.js
export function Chart(props) {
return (
<section className="chart">
<div className="wrapper">
<h2>{props.children}</h2>
<div className="img-container">
<img className="desktop" src={chart} />
<img className="mobile" src={mobileChart} />
</div>
</div>
</section>
);
}
You have to import it this way:
With export default
import Chart from "./ChartComponent";
Without export default
import { Chart } from "./ChartComponent";
<Chart>
<div>
child elements
</div>
</Chart>
This should pass the children into your component if you are listening for props.
If you have multiple components in single file, you can export them in these ways:
ExampleMultipleComponents.js
export const ComponentI = class ComponentI extends React.Component {....};
export const ComponentII = () => (<div> ... </div>);
or like:
const ComponentI = class ComponentI extends React.Component {....};
const ComponentII = () => (<div> ... </div>);
export {
ComponentII,
ComponentI,
}
And them import them like:
import { ComponentI, ComponentII } from './ExampleMultipleComponents';
Hope this is helpful!