How to structure component export without export default?

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.

I am importing it like import {hero} from '../components/hero.js' These ones are ok. The issue is when I have a function that is taking {children.props} i'll update my answer to explain more clearly — h0bb5
– h0bb5, Commented May 1, 2019 at 16:58

Avanthika · Accepted Answer · 2019-05-01 17:16:27Z

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!

edited May 1, 2019 at 17:16

answered May 1, 2019 at 17:00

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

h0bb5 Over a year ago

My file structure is pretty flat. Just 1 file per component. I am trying to avoid export default for class components I guess?

Collectives™ on Stack Overflow

How to structure component export without export default?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related