I have several methods that return jsx objects that I want to be able to call from outside the class, currently, the only way I found that work is to export arrow functions from outside of the class in the same file, but I end up with too many functions out of the class.

So is there a way to export multiple class methods from the same file and keep them in the class?

I don't want to make a new class for each of those functions because they're related, and I need to call them out of the class so I'll be able to add them in Storybook.

Example of what I want:

//A.js 
class A{
  export foo() {return (<div>...</div>)}
  export bar() {...}
}

export default A

What I have now that works:

//A.js 
export default class A{
...
}
export const foo = () => {...}
export const bar= () => {...}

I have several methods that return jsx objects that I want to be able to call from outside the class, currently, the only way I found that work is to export arrow functions from outside of the class in the same file, but I end up with too many functions out of the class.

So is there a way to export multiple class methods from the same file and keep them in the class?

I don't want to make a new class for each of those functions because they're related, and I need to call them out of the class so I'll be able to add them in Storybook.

Example of what I want:

//A.js 
class A{
  export foo() {return (<div>...</div>)}
  export bar() {...}
}

export default A

What I have now that works:

//A.js 
export default class A{
...
}
export const foo = () => {...}
export const bar= () => {...}

• javascript
• reactjs
• ecmascript-6
• es6-class

• 1 Might want to use static keyword – ionizer Commented May 6, 2018 at 20:46
• But I end up with a file that most of the methods in it are not in the class, isn't that code smell? @ionizer – shinzou Commented May 6, 2018 at 20:47
• Do you mind describing what those functions do? – ionizer Commented May 6, 2018 at 20:50
• They return a jsx object, some of them are pure and some of them call other functions but all of them don't have state. @ionizer – shinzou Commented May 6, 2018 at 20:51
• If they're not dependent on class variable/properties (with this), I think using static might be what you really needed. For example, inside your class, use static foo() {...}. Otherwise, need to use the common class method. – ionizer Commented May 6, 2018 at 20:55

2 Answers 2

If your methods does not rely on its own properties or variables (accessed using this), you might want to try using static methods

export default class A {
  static foo() {return (<div>...</div>)}
  static bar() {...}
  ...
}

And then, you can use it like so:

import A from './A';

A.foo();

The advantage of using static method is that you don't need to create an instance to use it. And, it does not get re-created when you create a new instance.

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

Live Demo:

class A {  
  static foo() {
    return "foo() called";
  }
  
  static bar() {
    console.log(this.foo() + " from bar()");
  }
}

class B {
  constructor() {
    A.bar();
  }
}

new B();

You don't need to export class methods. Just create an instance of the class and call them:

// A.js 
class A{
  foo() {return (<div>...</div>)}
  bar() {...}
}

export default A

Import class A in other file:

import A from './A'

// create instance of class A
const a = new A()

// ... and call your methods on instance `a`
a.foo()
a.bar()