如何从 React JS 中的另一个组件导入多个变量或列表？

Question

I have a Profile.js component which uses some list. The list is two big so I want to shift the list to a different LabelValue.js component and import it in Profile.js. But I'm not able to do so. Kindly depict the right way to do the import and export.

In LabelValue.js

const bloodGroups = [
  { label: "Choose", value: "" },
  { label: "A+", value: "A+" },
  { label: "B+", value: "B+" },
  { label: "AB+", value: "AB+" },
  { label: "O+", value: "O+" },
  { label: "O-", value: "O-" },
  { label: "A-", value: "A-" },
  { label: "B-", value: "B-" },
  { label: "AB-", value: "AB-" },
];

 const genders = [
    { label: "Choose", value: "" },
    { label: "Male", value: "Male" },
    { label: "Female", value: "Female" },
    { label: "Others", value: "Others" },
  ];

export default { genders, bloodGroups };

In Profile.js

import { bloodGroups, genders } from ".path/to/LabelValue.js"

The Error

./src/Pages/Profile.js
Attempted import error: 'bloodGroups' is not exported from '../LabelValue'.

Answer 1

Use

export { genders, bloodGrousps };

NOT

export default { genders, bloodGrousps };

Default is for single value