How to count multiple objects inside nested array sequentially in react js

Question

I have an array structure like this :

const array = [
    [
        {
            "item": { "name": "item1" },
            "property": { "name": "property1" }
        },
        {
            "item": { "name": "item2" },
            "property": { "name": "property2" }
        }
    ],
    [
        {
            "item": { "name": "item3" },
            "property": { "name": "property3" }
        }
    ]
]

If I run this command in pure Javascript:

let count = 0
for(let i = 0; i < array.length; i++) {
    for(let j = 0; j < array[i].length; j++) {
        count ++
        console.log(count)
    }
}

Then the output will be like this :

1,2,3

I want to be able to generate the output like above using array.map() in ReactJS and keep those sections. This is the code I'm currently using:

return (
    <div className="container">
    {array.map((nestedArray, arrayIndex) => (
        <div key={arrayIndex} className="array-list">
            <h1>Group: {arrayIndex+1}</h1>
            {nestedArray.map((items, nestedArrayIndex) => (
                <p>Item: {nestedArrayIndex+1}</p>
            ))}
        </div>
    ))}
    </div>
)

And this is the render output (using my css styles):

What is an effective and short way to do it?

I hope I have explained everything clearly

FYI: This happens because of key attribute on the div. If you remove the key then it will show as you want it to but React will throw an error. — Ayush Gupta
– Ayush Gupta, Commented Aug 7, 2021 at 5:58

Andy · Accepted Answer · 2021-08-10 07:32:40Z

If you want to keep those sections I think the easiest thing would be to use a variable to keep track of the count. You can then use map to iterate over array and its arrays, updating count as each new array is encountered.

To do that you should separate out the code into a function that you call from your component's return.

const array=[[{item:{name:"item1"},property:{name:"property1"}},{item:{name:"item2"},property:{name:"property2"}}],[{item:{name:"item3"},property:{name:"property3"}}]];

function Example({ data }) {

  function createJSX(data) {

    let count = 0;

    return array.map((arr, i) => {
      return (
        <div>
          <h3>Group: {i + 1}</h3>
          {arr.map(obj => {
            ++count;
            return <p>Item: {count}</p>;
          })}
        </div>
      )
    });

  }

  return (
    <div>
      {createJSX()}
    </div>
  );

};

// Render it
ReactDOM.render(
  <Example data={array} />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
    <div id="react"></div>

And then call the function from your render:

return (
  <div className="container">
    {createJSX()}
  </div>
);

Ryan Le · Accepted Answer · 2021-08-07 06:02:01Z

3

You could do something like this.

const array = [
  [
    {
      item: { name: "item1" },
      property: { name: "property1" }
    },
    {
      item: { name: "item2" },
      property: { name: "property2" }
    }
  ],
  [
    {
      item: { name: "item3" },
      property: { name: "property3" }
    }
  ]
];

 <div className="container">
    {array.flat().map((item, arrayIndex) => (
       <p>Item: {arrayIndex + 1}</p>
    ))}
 </div>

You will need to flatten your array first, then all children will be in one array.

answered Aug 7, 2021 at 6:02

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

5 Comments

Nick Parsons Over a year ago

The problem with flattening is that OP has sections/groups in their returned output, and flattening the array will remove those sections

Ryan Le Over a year ago

Thanks mate! This is my first answer on the site :D

Ryan Le Over a year ago

@NickParsons You're right. It really depends on if they want to keep those sections still.

stu Over a year ago

@RyanLe just like Nick Parsons said, the above method removes this element <div key={arrayIndex} className="array-list" /> and I need it to separate between groups of items. But the method above gave me new knowledge, so thank you for that. But still, it is not the right answer for my case.

Ryan Le Over a year ago

Hey @FarhanPradanaTallei. I add another solution bellow

Ryan Le · Accepted Answer · 2021-08-07 07:04:00Z

1

Another option if you want to keep track of those sections:

render() {
  let indexCount = 0;
  return (
    <div className="container">
      {array.map((nestedArray, arrayIndex) => (
        <div key={arrayIndex} className="array-list">
          {nestedArray.map((items, nestedArrayIndex) => (
            <p key={(indexCount += 1)}>Item: {indexCount}</p>
          ))}
      </div>
    ))}
  </div>
);

}

You will need a variable to save the current indexCount then just simply increase it each time you render the final index. Also, I added a missing key to your child nestedArray render.

Just a side note is that it's not recommended to use array indexes as render list keys.

edited Aug 7, 2021 at 7:04

answered Aug 7, 2021 at 6:55

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

5 Comments

Andy Over a year ago

render won't be applicable if the OP is using a functional component.

stu Over a year ago

I appreciate your answer, the method above is good and by my wishes. But that answer had already been similarly preceded by Andy. I'm waiting for a better answer, but there doesn't seem to be one. Once again, thank you so much

Ryan Le Over a year ago

Appreciate your kindness @FarhanPradanaTallei

Andy Over a year ago

@FarhanPradanaTallei I've updated my answer with a working React example based on your data.

stu Over a year ago

@Andy great! it becomes better

Collectives™ on Stack Overflow

How to count multiple objects inside nested array sequentially in react js

3 Answers 3

Comments

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related