Reputation: 13
ReactJS rookie, reporting in:
I'm working with a large repo where several components are using string literals for verification purposes. I've been tasked with creating a constant that holds this value and to replace every instance throughout the code.
The initial design was to create a constant in a .js file and globally export/import it to the necessary locations. The issue with this is that the string value either is not declared properly or is lost because of scope.
I've been scouring the internet for a solution. Aside from making counters and buttons, I haven't found anything helpful regarding this issue. Just wanted to see if there are others who have attempted to do this and found a solution. Here's a few snippets of code:
//requirements.js
export const expiryTag = 'Expiration Date'
//validation.jsx: original code
nextProps.userRequirements.map((r) => {
let exp_date = ''
let id = ''
let ary1 = _.where(r.fields, {field_name: 'Expiration Date'})
.
.
.
}
//validation.jsx: desired code
import expiryTag from '../../constants/requirements'
nextProps.userRequirements.map((r) => {
let exp_date = ''
let id = ''
let ary1 = _.where(r.fields, {field_name: expiryTag})
.
.
.
}
I believe the issue is with the syntax of React, but I haven't found any blog post that explains what I'm trying to do. If anyone has a suggestion, it'd be greatly appreciated.
Upvotes: 1
Views: 605
Reputation: 3725
You are exporting it as a named export.
If you want to import it like this:
import expiryTag from '../../constants/requirements'
you need to export it this way:
export default 'Expiration Date'
// or
const expiryTag = 'Expiration Date'
export default expiryTag
If, instead, you want to keep this way of exporting:
export const expiryTag = 'Expiration Date'
you then need to import it like this:
import { expiryTag } from '../../constants/requirements'
Upvotes: 1