reactjs - how to modify database data after fetching it in react

Question

I have a few js that only contain export const and those are not any class or function. I have an async-await function to fetch data from the database. Now I need to create another const that will only fetch the first data from the result. and there is another const where I need to set that data.

data fetching const in db.js

export const getLatestData = async () => {
  const url = `${testDB.serverUrl}/findLatestTen`;
  const res = await axios.get(url).then(res => res);
  return res;
};

I have another function that will retrieve only the first value

export const getFirst = async () => {
  const test = await getLatestData();
  const example = test.data[0].salary;
  // If I put console.log here I get the example value as expected
};

But I have another js file called employee.js where I have some const like this

export const details = [
  {
    title: 'HR',

    links: [
      {
        title: 'Employee 1',
        salary: async () => {
          await getFirst();
        }
      },
      {
        title: 'Employee 2',
        salary: async () => {
          await getFirst();
        }
      }
    ]
  }
];

I will use this employee.js to set value in the UI. But I am not getting the value. Can I please get some help?

TIA

Answer 1

await getFirst() will just run the function. If you want to get the you should return the function.

export const getFirst = async () => {
  const test = await getLatestData();
  const example = test.data[0].salary;
  return example; // return value
};

export const details = [
  {
    title: 'HR',

    links: [
      {
        title: 'Employee 1',
        salary: async () => {
          return await getFirst();  // return function result
        }
      },
      {
        title: 'Employee 2',
        salary: async () => {
          return await getFirst();  // return function result
        }
      }
    ]
  }
];