I have a component that is used throughout my application. There is a list of elements in the component, and I need to generate tab indexes for these elements.

However, indices should be divided into groups. For example, first group of indices might start with 1000 offset, another group with 2000, so tab indices are different, like:

<p tabindex="1001">...</p>
<p tabindex="1002">...</p>
<p tabindex="1003">...</p>
<p tabindex="1004">...</p>

<p tabindex="2001">...</p>
<p tabindex="2002">...</p>
<p tabindex="2003">...</p>
<p tabindex="2004">...</p>

What I'm currently doing is something like:

          {attachmentsData?.data?.map((attachment, tabIndex) => (
                <FileName tabIndex={1000 + tabIndex} onClick={...}>
                  {attachment.filename}
                </FileName>
              </div>
              <AttachmentButtonContainer>
                <DownloadIcon
                  tabIndex={2000 + tabIndex}...

I'm looking to create a hook/function, so I can use it this way:

          {attachmentsData?.data?.map((attachment, tabIndex) => (
                <FileName tabIndex={getNext('group1')} onClick={...}>
                  {attachment.filename}
                </FileName>
              </div>
              <AttachmentButtonContainer>
                <DownloadIcon
                  tabIndex={getNext('group2')}...

But not sure what's the idiomatic way to do that. Basically, the idea is that getNext should generate indices regardless of how many times this component gets rendered on the page: one time o hundred times. So we should keep getNext as a parameter to the component, right?

How exactly it can look like, so once you call it, the counter gets increased? I tried to create my own hook based on useState, however it has two functions - one to read the value, one to set the value. I want to combine things - once you read the value, it gets increased, started from some offset. The offset can be random, 1000 or 10000, doesn't matter too much. The only thing is that it should be sequential, so users can use keyboard to navigate.

Maybe you can give me some other advice on how to architecture this. Thanks!