export variable from class React

Question

In my app.js inside the app class there is a variable that I want to export to another module. I tried many options, but unfortunately, the understanding of how to do it correctly did not come. Tell me, please, how to do it right? Export default is already in use in my class

export class App extends Component {
    static propTypes = {
        //somecode
    };

    constructor(...args: any): void {
        super(...args);
    }

    render() {
        // console.log('app render start');
        const test = true;
        return (
        //somecode
        );
    }

    componentDidMount() {
        //somecode
    }


    componentDidUpdate(prevProps): void {
        //somecode
    }
}

In the example above, i need to export variable 'test'

I would be grateful for any help.

Store test's value in state, pass state as a prop. Donezo!

Meet Zaveri
– Meet Zaveri

2019-02-05 04:38:43 +00:00
Commented Feb 5, 2019 at 4:38 — Meet Zaveri
– Meet Zaveri, Commented Feb 5, 2019 at 4:38

Let Me Tink About It · Accepted Answer · 2019-05-28 04:56:21Z

17

Assuming your intention with test is to define something like a "project constant" (which is what I gather, from your use of the const keyword), then you could simply declare test outside of the App class, and then export it from the module in the same way you are exporting the class:

App.js

/*
Export test variable
*/
export const test = true;

/*
Export your App class
*/
export class App extends Component {
    static propTypes = {
        //somecode
    };

    constructor(...args: any): void {
        super(...args);
    }

    render() {
        /*
        Access test variable in "global scope" inside render method
        */
        console.log(`test is: ${ test }`);

        // console.log('app render start');
        // const test = true;
        return (
        //somecode
        );
    }

    componentDidMount() {
        //somecode
    }


    componentDidUpdate(prevProps): void {
        //somecode
    }
}

And then, from another module in your project you could access test like so:

MyModule.js

import { App, test, } from 'path/to/App';

console.log(`test is: ${ test }`);

edited May 28, 2019 at 4:56

Let Me Tink About It

16.3k23 gold badges109 silver badges221 bronze badges

answered Feb 5, 2019 at 4:41

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

3 Comments

A.Burdonskaya Over a year ago

Thanks, I managed to export a variable, but the problem is that the variable contains data that I cannot get outside of the class. in my particular case, I want to get an url by contacting it with a location.search, but outside the class I get an error ReferenceError: location is not defined

Dacre Denny Over a year ago

@A.Burdonskaya you're welcome - are you wanting to pass the location.search data to a javascript module outside of app.js?

A.Burdonskaya Over a year ago

Yes. I tried to access the location inside another module, but after unsuccessful attempts I decided to export a constant :c

flaw13 · Accepted Answer · 2019-02-05 05:36:22Z

2

You could make test a static property on the App class, then just reference it from the App class since that is exported.

class Test extends React.Component {
  static test = true;
}

console.info(Test.test);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import Test from 'test';
console.info(Test.test);

answered Feb 5, 2019 at 5:36

flaw13

535 bronze badges

Collectives™ on Stack Overflow

export variable from class React

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related