my const variable ul is returning undefined array instead of returning an array of objects, how can I get the code to return an array

Question

I found a way to get my list items into an array which can be mapped into its different ul component using this piece of code

const ul = Object.entries(props.allshop).map(([item, list, index]) => {
  [...Array(Object.keys(list))].map((newItem, index) => {
    return (
      <BuildControl key={index} item={newItem} title={item}></BuildControl>
    );
  });
});

However, I still have an issue because ul is returning undefined as the values of the array like this

{console.log(ul)} = [undefined, undefined, undefined, undefined, undefined] 

I tried running console.log on my BuildControl component and it returned the objects I was expecting like this:

console.log(
  <BuildControl key={index} item={newItem} title={item}></BuildControl>
);

reveals the arrays mapped correctly

Now my challenge is how to get the ul to return this value of the buildControl insteadof undefined

Answer 1

You forgot to return the result of the outer map function. You could have an explicit return like below

const ul = Object.entries(props.allshop).map(([item, list, index]) => {
  return [...Array(Object.keys(list))].map((newItem, index) => {
    return (
      <BuildControl key={index} item={newItem} title={item}></BuildControl>
    );
  });
});

or an implicit return like

const ul = Object.entries(props.allshop).map(([item, list, index]) => 
       [...Array(Object.keys(list))].map((newItem, index) => {
        return (
          <BuildControl key={index} item={newItem} title={item}></BuildControl>
        );
      });
    );