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

should be salary: () => { getFirst(); }, now it just a promise, you need to resolve it. — Dennis Vash
– Dennis Vash, Commented Dec 30, 2020 at 14:16

michael · Accepted Answer · 2020-12-30 14:22:33Z

0

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
        }
      }
    ]
  }
];

answered Dec 30, 2020 at 14:22

michael

4,1733 gold badges15 silver badges31 bronze badges

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

8 Comments

Rhea Over a year ago

I tried this but if I do this. salary: async () => { return await getFirst(); // return function result }. then autofix removes that return and I am still getting the error

Rhea Over a year ago

If I do like this salary: async () => { const ex = await getFirst(); console.log(ex ${ex}); return ex; }. Then I am getting async () => { const ex = await Object(_pbfs__WEBPACK_IMPORTED_MODULE_0__["getFirst"])(); console.log(ex ${ex}); return ex; I am calling this pbf from a class and there I put a log

michael Over a year ago

you'd better not export details array. Just define the array on where you're using it.

Rhea Over a year ago

I can't change it, unfortunately. Because that's an existing structure. Basically, my goal is getFirst() should return a string and I want to use getFirst() may places

michael Over a year ago

what is the exact error when you try to use like details[0].links[0].salary?

|

Collectives™ on Stack Overflow

how to modify database data after fetching it in react

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related