How to loop an object in React

Question

data is here subprojects={"RFv6bJMG2dmiBqWNZX8O":{"content":"this is ・・data"}}

console.log("subprojects=" + JSON.stringify(subprojects));

const SubList = ({ subprojects }) => {
if(subprojects){
  return (
    <div className="project-list section">
      {subprojects &&
        subprojects.map((subproject) => {
          return (
            <div>
              {subproject.id}
            </div>
          );
        })}
    </div>
  );}
  else{

The result is TypeError: subprojects.map is not a function

Does this answer your question? [How do I loop through or enumerate a JavaScript object?](https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) — Patrick Roberts, Mar 01 '21 at 08:34

m5khan · Answer 1 · 2022-08-08T08:38:10.180

3

use Object.entries. Check MDN Docs.

      {
        Object.entries(subprojects).map(([key, val]) => {
          return (
            <div key={key}>
              {val.id}
            </div>
          );
        })}

Alternatively you can also use Object.values if you are not concerned about the keys

edited Aug 08 '22 at 08:38

answered Mar 01 '21 at 08:38

m5khan

2,667
1
27
37

How to loop an object in React

1 Answers1