I want to export variable that declared inside the function component in React Js. How can I do that?

Question

I am creating react app. I want to export RoomPricelist1 & FacilityPricelist1 variables. I have assigned values to those variables inside the function component I have tried, but it showing undefined when import in another function component I want to export RoomPricelist1 & FacilityPricelist1**
Is it possible?

import React, { useEffect, useState } from "react";
import StudentService from "../../Services/StudentService";
import PriceChartHtml from "./PriceCharthtml";

var RoomPricelist1
var FacilityPricelist1

export function PriceChart() {
  const [RoomPricelist, setRoomPricelist] = useState([]);
  const [FacilityPricelist, setFacilityPricelist] = useState([]);

  RoomPricelist1 = RoomPricelist
  FacilityPricelist1 = FacilityPricelist

  useEffect(() => {
    
    StudentService.getroompriceList()
      .then((response) => {
        // console.log(response);
        if (response) {
            setRoomPricelist(response.data);
        }
      })
      .catch((err) => {
        console.log(err);
      });

    StudentService.getfacilitypriceList()
      .then((response) => {
        // console.log(response);
        if (response) {
            setFacilityPricelist(response.data);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <>
      <h3>Price list</h3>
      <h5>Rooms</h5>

      <table className="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Sr. no</th>
            <th scope="col">Description</th>
            <th scope="col">Amount in Rs.</th>
          </tr>
        </thead>
        <tbody>
          {RoomPricelist.map((price) => {
            return <PriceChartHtml key={price.id} price={price} />;
          })}
        </tbody>
      </table>

      <h5>facilities</h5>
      <table className="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Sr. no</th>
            <th scope="col">Description</th>
            <th scope="col">Amount in Rs.</th>
          </tr>
        </thead>
        <tbody>
          {FacilityPricelist.map((price) => {
            return <PriceChartHtml key={price.id} price={price} />;
          })}
        </tbody>
      </table>

    </>
  );
}

export const RoomPricelist = RoomPricelist1
export const FacilityPricelist = FacilityPricelist1

Answer 1

aren't you looking for something like this?

 export const RoomPricelist = async () => {
      try {
        const response = await StudentService.getroompriceList();
        const json = await response.json();
        console.log(json);
      }
      catch (e) {
        console.log('Error', e);
      }
    }

Answer 2

What you are trying to do here is a common problematic of a React application. Exporting variables works for constants, but here you want to bind it to a state variable, that might change during runtime.

There are at least two solutions to this problem: Props drilling or using a store.

Props drilling consists of passing variables inside your component template like this:

...
return (
  <SomeComponent RoomPriceList1={RoomPriceList}
                 FacilityPriceList1={FacitilyPriceList}/>
);
...

Here you get the downside: You could not use it outside the scope of this component.

The best solution to this problem might be creating a 'store'. There are multiple ways of creating a store. One is React context: https://en.reactjs.org/docs/context.html

Another widely used 'store' is React Redux that is usually implemented this way:

...
<Provider store={store}>
  <App />
</Provider>
...

https://react-redux.js.org/introduction/getting-started

The store concept will allow to use your variables in your whole application without having to use props drilling.