You can loop over the values of each object in the array, create list items from each of them, and append them to the list element.

let obj = {
  edges: [
    {name: 'Bath', path: '/bath/', entityId: 18},
    {name: 'Shop App', path: '/shop-all/', entityId: 23}
  ]
}
let ul = document.createElement('ul');
for(const x of obj.edges) 
  for(const textContent of Object.values(x))
    ul.append(Object.assign(document.createElement('li'), {textContent}));
document.body.append(ul);

2 Ways

There are 2 solutions I can think of at the moment.

<Array>.forEach()

This solution is best if you want to log the individual elements of the array.
There's a better way for changing the array elements but let's look at the example.

const arr = [{ name: "Home", path: "/home" }, { name: "Forums", path: "/forums" }];

arr.forEach((value) => {
    console.log(value);
});
// { name: "Home", path: "/home" }
// { name: "Forums", path: "/forums" }


// You can map it to a new value by doing this

const newArr = [];

arr.forEach((value) => {
    newArr.push(value.name);
});

console.log(newArr);
// ["Home", "Forums"]

<Array>.map()

This is the best solution I would use.
This method changes the value of individual element to what returns in your function.

const arr = [{ name: "Home", path: "/home" }, { name: "Forums", path: "/forums" }];

const newArr = arr.map((value) => value.name);
console.log(newArr);

// ["Home", "Forums"]
// Notice how the value has changed

The Solution

Here's what the solution will look like

function YourComponent() {
    const edges = product.categories.edges;
    const products = edges.map((value) => [value.name, value.path, value.entityId.toString()]);

    return (
        {
            products.map((data) => {
                return (
                    <li>data[0]</li>
                    <li>data[1]</li>
                    <li>data[2]</li>
                );
            });
        }
    );
};