CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Octavian
Octavian

Reputation: 673

Is it possible to export just a constant variable from inside a React function?

I'm trying to set the value of an object using an API call and export the result to other classes from inside my app.

This is how I'm trying to do it 

import {MaterialUIComponentsNavigation} from 'app/main/documentation/material-ui-components/MaterialUIComponentsNavigation';
import {authRoles} from 'app/auth';
import {callTextApi} from "../services/textService/textContext";
import {useState} from "react";

function navigationConfig () {

  console.log("Random");
  return test =  [
    {
      'id'      : 'applications',
      'title'   : 'Applications',
      'type'    : 'group',
      'icon'    : 'apps',
      'children': [
        {
          'id'      : 'dashboards',
          'title'   : 'Dashboards',
          'type'    : 'collapse',
          'icon'    : 'dashboard',
          'children': [
            {
              'id'   : 'analytics-dashboard',
              'title': 'Raaaaaaaaaaaa',
              'type' : 'item',
              'url'  : '/apps/dashboards/analytics'
            },
            {
              'id'   : 'project-dashboard',
              'title': 'Project',
              'type' : 'item',
              'url'  : '/apps/dashboards/project'
            }
          ]
        },
//some more object fields
}
export default navigationConfig;

My question is: Is there a way to only export the test variable and not the entire function? I need this to be a function because I can't use react hooks inside a constant, that why I am trying to export a constant from inside a function.

The export looks like this 

navigationConfig() {
  console.log("Random");
  return test = [{
    'id': 'applications',
    'title': 'Applications',
    'type': 'group',
    'icon': 'apps',
    'children': [{
      'id': 'dashbo…

When it should be looking like this:

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: "authentication", title: "Authentication", type: "collapse", icon: "lock", badge: {…}, …}
1: {id: "coming-soon", title: "Coming Soon", type: "item", icon: "alarm", url: "/pages/coming-soon"}
2: {id: "errors", title: "Errors", type: "collapse", icon: "error", children: Array(2)}
3: {id: "invoice", title: "Invoice", type: "collapse", icon: "receipt", children: Array(2)}
4: {id: "maintenance", title: "Maintenance", type: "item", icon: "build", url: "/pages/maintenance"}
5: {id: "pricing", title: "Pricing", type: "collapse", icon: "attach_money", children: Array(3)}
6: {id: "profile", title: "Profile", type: "item", icon: "person", url: "/pages/profile"}
7: {id: "search", title: "Search", type: "collapse", icon: "search", children: Array(2)}
8: {id: "faq", title: "Faq", type: "item", icon: "help", url: "/pages/faq"}
9: {id: "knowledge-base", title: "Knowledge Base", type: "item", icon: "import_contacts", url: "/pages/knowledge-base"}

Hopefully the question makes sence.

P.S. I'm still learning React so please don't be too harsh :D

Upvotes: 2

Views: 1102

Answers (2)

vatz88
vatz88

Reputation: 2452

You can just export the function and call it wherever you want. Don't know if I understood your question correctly.

If you still want to export object and not the function, something like this may work:

navigationConfig() {
    // ....
}

const myExport = navigationConfig();

export default myExport;

Upvotes: 0

Ishan Joshi
Ishan Joshi

Reputation: 525

You can export a variable like so:

const data = {};

export default data;

Upvotes: 1

Related Questions