How to export a variable (its a list actually) to other .js file in a function inside class

Question

How to export a variable or a list which is modified inside a function inside the class to other .js file?

renderBoxContent = () => {

  let total = 0;
  let Total = 0;
  let itemList = [];
  let  data = [];

  this.state.availableItems.map((items)=> {

      if(items.purchase > 0){
       Total += items.price*items.purchase;
       total = items.price*items.purchase;
       console.log(items.purchase);
       console.log(total);

          data.push(
          {
            key: items.name,
            name: items.name,
            // src: items.image,
            singlePrice: items.price.toFixed(2),
            purchase: items.purchase,
            totalItemPrice: total.toFixed(2),
          }
        )
      }
  })


  //how to export 'data' to other .js file?

  itemList.push(  <Table defaultExpandAllRows={false} locale={{emptyText: 'Empty Cart'}} style={{background: '#ffffff'}} pagination={false} columns={column} dataSource={data} size="small" />)
  itemList.push( <h3 style={{paddingLeft:15,paddingTop:20}}>    Total     {Total.toFixed(2)}</h3>)
  return itemList;
 }

Should be able to access and import the 'data' list variable in other .js file

create a function in exporting class, which returns the list you want to export import that class in file where you need that function and call the functions which returns the list — Faizan Ul Haq
– Faizan Ul Haq, Commented Jul 17, 2019 at 6:50
if function you are exporting is part of another react component you are doing it wrong , but if it is just a helper file which have functions you want then you can import className from 'PATH_TO_FILE'; then className.function(); — Faizan Ul Haq
– Faizan Ul Haq, Commented Jul 17, 2019 at 10:13

Jørgen · Accepted Answer · 2019-07-17 07:06:46Z

1

What about using React Context?

First create and export your context

export const DataContext = React.createContext();

Wrap your components in a provider component and give it your data

<DataContext.Provider value={data}>

And consume it like this in your other component

import DataContext from '...' // add your path
const data = useContext(DataContext)

If your components are either parents or grand parents of each other, i recommend you pass the value as props between components instead.

edited Jul 17, 2019 at 7:06

answered Jul 17, 2019 at 6:57

Jørgen

3602 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Faizan Ul Haq · Accepted Answer · 2019-07-17 07:00:05Z

0

it seems like you are working with react, so simply put you should look into Redux or context API, instead of creating custom functions to import and export data from one file to an other. both of above are used to create a global state which can be accessed in any file of your project.

it will be little bit difficult to understand them at first, but once you get to know how to use them (one of them) it will make global state management very easy for you.

edited Jul 17, 2019 at 7:00

answered Jul 17, 2019 at 6:54

Faizan Ul Haq

5712 gold badges9 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to export a variable (its a list actually) to other .js file in a function inside class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related