How to get a config value into a href as string instead of object object

user_1523603 0
Viewed 72

I have a config file setup that exports a bunch of values... 

const dev = {
    ...,
    someRandomLink: 'https://google.com'
}
const config = process.env.REACT_APP_STAGE === 'production' ? prod : dev;
export default {
   ...config
}

I then import this file and try to use the value for a href but it outputs [Object object]. 

import someRandomLink from '../constants/config';


...
<a href={someRandomLink}...

What is the correct way to extract that config variable as a string for the link?

react-redux reactjs javascript
2 Answers

You are exporting an object that contains someRandomLink as property.

When you import the default export, you are importing the entire object and giving it a name, instead of import the specific property.

Try to use it like this

import { someRandomLink } from '../constants/config';

...
<a href={someRandomLink}...

or like this is possible as well:

import config from '../constants/config';

...
<a href={config.someRandomLink}...
user_47252110 
export default {
   ...config
}

So you are trying to export as default an object (I guess it's not config, it's dev). There's 2 ways to export some info from a file:

1) export default myFunction this is importing one single method/object/any value you want to do. Then to import it it's as easy as import myFunction from './myFile'. Since it's a default export, you could name it as you wish: import Hello from './myFile' would work as well.

2) export {myFunction} this is the way to import it as a module, and not a default. With this technique you can import multiple functions like export {myFunction, myOtherFunction, myAwesomeThirdFunction}. The way to import it then it's like import {myFunction} from './myFile'.

In your case you have a mixup between default and the module exports. My suggestion would be:

const config = { // I corrected this dev variable name
    ...,
    someRandomLink: 'https://google.com'
}

export {config}

import {config} from '../constants/config';

...
<a href={config.someRandomLink}...

Notice that since you exported a method, you need then to access to that property. Otherwise, you would attempt to do something like:

<a href={{someRandomLink: 'myUrl.com', otherProperties: 'otherProperties'}}...

So that wouldn't work.

user_63620070
Related