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.stack.imgur.com/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, Feb 21 '19 at 15:04
Does this answer your question? [exporting multiple modules in react.js](https://stackoverflow.com/questions/46039976/exporting-multiple-modules-in-react-js) — grepit, May 24 '21 at 19:10

webbm · Accepted Answer · 2019-02-21T15:07:39.603

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 '19 at 15:07

answered Feb 21 '19 at 15:00

webbm

634
8
18

with 'export function BlogTrends(props){}' and `export default { BlogTrends, BlogDescription };` bellow error is coming :
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
and without `export default { BlogTrends, BlogDescription };` bellow error is coming :
_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......_ – Avinash Feb 21 '19 at 15:03
Where did you change it? – webbm Feb 21 '19 at 15:04

score 2 · Answer 2 · answered Sep 17 '21 at 12:50

2

Exporting multiple functions

export default myMainFunc;
export { mySecondFunc };

answered Sep 17 '21 at 12:50

GMKHussain

3,342
1
21
19

Itsca · Answer 3 · 2019-02-21T15:20:39.573

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

How to use multiple `export default ` in react

3 Answers3

Linked