CODEWITHSUNDEEP
javascriptreactjs
Amos Machora
Amos Machora

Reputation: 545

How can i export a function without passing it as props or using the export keyword?

I have a component like this

const ListOfMeds = () => {
  const mockListOfMedicines = [
    {
      medicineName: "Augmentin 625 Duo Tablet",
      medicineId: "D06ID232435454",
      groupName: "Generic Medicine",
      stock: 350,
    },
    {
      medicineName: "Augmentin 625 Duo Tablet",
      medicineId: "D06ID232435454",
      groupName: "Generic Medicine",
      stock: 350,
    },
  ];

  const getSpecificMedicineWithId = (number) => {
    const filteredData = mockListOfMedicines.find((medicine) => {
      return medicine.medicineId === number;
    });

    return filteredData;
  };



 return{
           <Some stuff/> 
       }


};
export default ListOfMeds;

i now have another component like this

import React from "react";
import { useParams } from "react-router-dom";

const MedicineInfo = () => {
  let params = useParams();

  return <div>MedicineId: {params.medicineId}</div>;
};

export default MedicineInfo;

I want the second component to call the function getSpecificMedicineWithId in the first component passing in the params objects key as the argument. However, the second component is not a child to the first component so I cannot pass that function as a prop. I also cannot use context because of also the same reason. It's not its child.

If I use export on the first component I get the errors

Modifiers cannot appear here.

and

'import' and 'export' may only appear at the top level. (58:2)

I can't take the getSpecificMedicineWithId function out of its component so as to export it because it depends on the data inside the component to work i.e the mockListOfMedicines array.

Now I'm stuck I don't know how to go about it. Kindly Help.

Upvotes: 1

Views: 782

Answers (1)

Lukas Laudrain
Lukas Laudrain

Reputation: 425

To achieve this, you must declare and export the function outside the component. Because your data is fixed here, you can have the function anywhere you want. (Maybe you should put it in an helper file for more cleanliness.)

// ListOfMeds.jsx
export const getSpecificMedicineWithId = (number) => {
  const mockListOfMedicines = [
    {
      medicineName: "Augmentin 625 Duo Tablet",
      medicineId: "D06ID232435454",
      groupName: "Generic Medicine",
      stock: 350,
    },
    {
      medicineName: "Augmentin 625 Duo Tablet",
      medicineId: "D06ID232435454",
      groupName: "Generic Medicine",
      stock: 350,
    },
  ];

  const filteredData = mockListOfMedicines.find((medicine) => {
    return medicine.medicineId === number;
  });

  return filteredData;
};

const ListOfMeds = () => {
  return <Some stuff /> 
};

export default ListOfMeds;

// MedicineInfo.jsx
import React from "react";
import { useParams } from "react-router-dom";

import { getSpecificMedicineWithId } from "./ListOfMeds";

const MedicineInfo = () => {
  let params = useParams();

  const medicine = getSpecificMedicineWithId(parrams.medicineId);

  return <div>MedicineId: {params.medicineId}</div>;
};

export default MedicineInfo;

Upvotes: 1

Related Questions