How to use multiple `export default ` in react

Question

import React from 'react';
import PropTypes from 'prop-types';


function BlogTrends(props) {
  BlogTrends.propTypes = {
    data: PropTypes.array
  };
  return (
    <div className="container blog-trends">
       <h3>{props.data[0].head}</h3>
       <h5 className="mar-t-25" >{props.data[0].desc}</h5>
    </div>
  );
}
function BlogDescription() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h5>Kitchen </h5>
        <p>Ocean</p>
      </div>
    </div>
  );
}

export default { BlogTrends, BlogDescription };

Error Image: https://i.sstatic.net/fStld.png
Tried: By removing BlogDescription and making the export statement to 'export default { BlogTrends;' is working . But while I am adding multiple component its not working. tried few things i.e
export default { BlogTrends, BlogDescription }; and
export { BlogTrends, BlogDescription }; and

export BlogTrends;<br />
export  BlogDescription;<br />

export default can only apply to one thing, so for example export default function BlogDescription() - you can then use export function BlogTrends() — rrd
– rrd, Commented Feb 21, 2019 at 15:04
Does this answer your question? exporting multiple modules in react.js — grepit
– grepit, Commented May 24, 2021 at 19:10

webbm · Accepted Answer · 2019-02-21 15:07:39Z

5

You can't have multiple default exports, but you can have multiple (non-default) exports.

Try adding export before the function keywords, like export function BlogDescription() {

Then to import them you would do import { BlogDescription } from './myFile'

edited Feb 21, 2019 at 15:07

answered Feb 21, 2019 at 15:00

webbm

6558 silver badges18 bronze badges

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

2 Comments

Avinash Over a year ago

with 'export function BlogTrends(props){}' and export default { BlogTrends, BlogDescription }; bellow error is coming :<br /> Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. <br /> and without export default { BlogTrends, BlogDescription }; bellow error is coming :<br /> Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might hav......

webbm Over a year ago

Where did you change it?

GMKHussain · Accepted Answer · 2021-09-17 12:50:15Z

2

Exporting multiple functions

export default myMainFunc;
export { mySecondFunc };

answered Sep 17, 2021 at 12:50

GMKHussain

4,8151 gold badge36 silver badges22 bronze badges

Comments

Itsca · Accepted Answer · 2019-02-21 15:20:39Z

The hole point of an export default is that when another file imports from this file without specifying a name it will fall back to the default, if there were several defaults on the file it would defeat this purpose, what you want, is to export each function and you can then have one of those as the default for the module, so in your case:

export function BlogTrends(props) {

export function BlogDescription() {

...

export default BlogTrends

Then on your importing file you can do:

import { BlogTrends } from 'pathToFile' ---> imports BlogTrends function.

import { BlogDescription } from 'pathToFile' ---> imports BlogDescription function.

import Default from 'pathToFile' ---> imports BlogTrends function.

Reference:

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Collectives™ on Stack Overflow

How to use multiple `export default ` in react

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related