How to rename variable (data) after destructuring (SWR hook for example) [duplicate]

Question

If I have 2 SWR hooks in same function (or some other hook that has a data variable),

export default function Panel() {
const { data, error } = useSWR("/api/customer", fetcher);
const { data, error } = useSWR("/api/user", fetcher);
...
data.map(...)
}

both of them have a data variable. How can I rename 1 data to something else so they don't replace each other?

---

As an option:

const { data, error } = useSWR("/api/customer", fetcher);
const dataHook1 = data;
const { data, error } = useSWR("/api/user", fetcher);
const dataHook2 = data;
...

but it doesn't look nice, maybe there are other options?

Answer 1

you can try destructuring and rename property

export default function Panel() {
    const { data: data1, error: error1 } = useSWR("/api/customer", fetcher);
    const { data: data2, error: error2 } = useSWR("/api/user", fetcher);
    ...
    data.map(...)
}

and can access as data1, error1 and data2, error2.