react JS mapping through an object

Question

I have an API that's returning me the categories and subcategories of 6 different stores the list might change between stores i want to map thru all the keys and values without having to specify what key i want (ex data.Baby, Baby Healthcare) i tried object.enteries

function FetchedData() {
  const [data, setData] = useState();



 const getApiData = async () => {
 const response = await fetch(
   `https://api/admin_stats`      
  ).then((response) => response.json());
 setData(response);
};

useEffect(() => {
 getApiData();
// eslint-disable-next-line
}, []);

for (const [key, value] of Object.entries(data)) {
  console.log(`${key}: ${value}`);
}

However i kept getting the error ' Uncaught TypeError: Cannot convert undefined or null to object at Function.entries ()'

this is the data:

David · Accepted Answer · 2022-09-24 13:08:52Z

2

The initial default value for data is undefined:

const [data, setData] = useState();

So on the first render this will fail with that exact error:

for (const [key, value] of Object.entries(data)) {

You can set the initial value to an empty object:

const [data, setData] = useState({});

Or perhaps not perform the operation at all if data is null or undefined:

if (data) {
  for (const [key, value] of Object.entries(data)) {
    console.log(`${key}: ${value}`);
  }
}

answered Sep 24, 2022 at 13:08

David

221k42 gold badges245 silver badges337 bronze badges

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

Collectives™ on Stack Overflow

react JS mapping through an object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related