This is my first time to develop a react application.

I am encountering difficulties in retrieving const data from another ponent.

Here is the const I want to access to the other ponent.

TableComponent.js

export default function({ infinite }) {
const [checkedMap, setCheckedMap] = useState(new Map());

const viewDetails = () => {
    return (
      "url here" +
      Array.from(checkedMap.keys()).join() +
      "/details"
    );
  };
}

//other codes

Is there a way how to access viewDetails to a different ponent?

Thank you.

This is my first time to develop a react application.

I am encountering difficulties in retrieving const data from another ponent.

Here is the const I want to access to the other ponent.

TableComponent.js

export default function({ infinite }) {
const [checkedMap, setCheckedMap] = useState(new Map());

const viewDetails = () => {
    return (
      "url here" +
      Array.from(checkedMap.keys()).join() +
      "/details"
    );
  };
}

//other codes

Is there a way how to access viewDetails to a different ponent?

Thank you.

• javascript
• reactjs

Share Improve this question Follow edited May 24, 2019 at 10:00 Dan asked May 24, 2019 at 9:37 DanDan 62344 gold badges1010 silver badges2323 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

you have to return your const viewDetails...either you need to self invoking function or return the function...e.g.

export default function({ infinite }) {
const viewDetails = () => {
    return (
      "url here" +
      Array.from(checkedMap.keys()).join() +
      "/details"
    );
  };
return viewDetails;
}

If you export the const:

export const viewDetails = () => {
    return (
      "url here" +
      Array.from(checkedMap.keys()).join() +
      "/details"
    );
  };
}

This must be in the module scope (on the same level as the default export):

export const viewDetails = () => {}
export default function({ infinite }) {}

You can then import from the other ponent:

import { viewDetails } from './TableComponent';

If you want to import both the default export and the named export:

import TableComponent, { viewDetails } from './TableComponent';

Finally, you can also access the named import from the default import:

import TableComponent from './TableComponent';
TableComponent.viewDetails();

//TableComponent.js

export const viewDetails = () => {
  return (
    "url here" +
    Array.from(checkedMap.keys()).join() +
    "/details"
  );
};

And in another file you can access this const as below

import { viewDetails } from './TableComponent';

const viewDetails = () => {
  return (
    "url here" +
    Array.from(checkedMap.keys()).join() +
    "/details"
  );
};

export default viewDetails;