CODEWITHSUNDEEP
javascripthtmlreactjsexport
Avinash
Avinash

Reputation: 1098

How to use multiple `export default ` in react

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 />

Upvotes: 1

Views: 14515

Answers (3)

GMKHussain
GMKHussain

Reputation: 4671

Exporting multiple functions

export default myMainFunc;
export { mySecondFunc };

Upvotes: 2

Itsca
Itsca

Reputation: 394

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

Upvotes: 1

webbm
webbm

Reputation: 653

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'

Upvotes: 5

Related Questions