In a file called index.js i have the following export:
export default {
foo: true,
bar: false
}
Later in file home.js i'm doing the following:
import { foo, bar } from './index'
console.log(foo, bar) -> undefined, undefined
If i import everything like:
import index from './index'
console.log(index) -> { foo: true, bar: false }
Can someone explain me why this is happening? I'm doing something wrong?
I'm using:
› create-react-app -V 1.0.3
What you have there are named exports, not destructuring.
You have to export them as such, not as a default export:
// this will export all of the defined properties as individual
// named exports, which you can pick-and-choose when importing
// using a similar syntax to destructuring
const foo = true, bar = false;
export {
foo,
bar
}
// imported exports named 'foo' and 'bar'
import { foo, bar } from './my-file'.
If you specify a default export, then whatever follows the keyword default will be exported when you import without curly braces:
// this exports an object containing { foo, bar } as the default export
export default {
foo: true,
bar: false
}
// imported without {}
import objectContainingFooBar from './my-file';