React exporting multiple method calling another method error-CodePudding

Currently i am exporting only one funtin like this and it works great

import React from "react";
import SocialLogin from "from somewwhere";

class GoogleButton extends React.Component {
  render() {
    const { fontClass, triggerLogin, ...props } = this.props;
    return (
     
        <div className="">
           Google
        </div>

    );
  }
}
export default SocialLogin(GoogleButton);

But when I try to export multiple functions, it doesn't work.

    import React from "react";
    import SocialLogin from "from somewhere";
    
    class GoogleButton extends React.Component {
      render() {
        const { fontClass, triggerLogin, ...props } = this.props;
        return (
         
            <div className="">
               Google
            </div>
    
        );
      }
    }

    
    class FacebookButton extends React.Component {
      render() {
        const { fontClass, triggerLogin, ...props } = this.props;
        return (
         
            <div className="">
               Facebook
            </div>
    
        );
      }
    }

    export {
        SocialLogin(GoogleButton),
        SocialLogin(FacebookButton);
    }

Can anyone tell me why it doesnt work? It works when i do like this

export {
 SomeFunc,
 AnotherFun,
}

But what's wrong with it if i put it inside a functin? Can anyone tell me how can i do it?

CodePudding user response：

You cam simply do this.

import React from "react";
    import SocialLogin from "from somewhere";
    
    export class GoogleButton extends React.Component {
      render() {
        const { fontClass, triggerLogin, ...props } = this.props;
        return (
         
            <div className="">
               Google
            </div>
    
        );
      }
    }

    
    export class FacebookButton extends React.Component {
      render() {
        const { fontClass, triggerLogin, ...props } = this.props;
        return (
         
            <div className="">
               Facebook
            </div>
    
        );
      }
    }

Or you can do this.

.... Existing components 

export default {
        SocialLoginGoogle: SocialLogin(GoogleButton),
        SocialLoginFacebook: SocialLogin(FacebookButton)
   }

The below one works as it is considering object's key and value has the same name. Hence, shorthand.

export {
 SomeFunc,
 AnotherFun,
}