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? — Patrick Roberts
– Patrick Roberts, Commented Mar 1, 2021 at 8:34

m5khan · Accepted Answer · 2022-08-08 08:38:10Z

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 8, 2022 at 8:38

answered Mar 1, 2021 at 8:38

m5khan

2,7271 gold badge31 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

How to loop an object in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related