Tengo un componente que se utiliza en toda mi aplicación. Hay una lista de elementos en el componente y necesito generar índices de pestañas para estos elementos.

Sin embargo, los índices deben dividirse en grupos. Por ejemplo, el primer grupo de índices podría comenzar con 1000 de compensación, otro grupo con 2000, por lo que los índices de las pestañas son diferentes, como:

 <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>

Lo que estoy haciendo actualmente es algo como:

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

Estoy buscando crear un gancho/función, para poder usarlo de esta manera:

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

Pero no estoy seguro de cuál es la forma idiomática de hacerlo. Básicamente, la idea es que getNext genere índices independientemente de cuántas veces se represente este componente en la página: una o cien veces. Entonces deberíamos mantener getNext como un parámetro para el componente, ¿verdad?

¿Cómo se ve exactamente, así que una vez que lo llamas, el contador aumenta? Traté de crear mi propio gancho basado en useState , sin embargo, tiene dos funciones: una para leer el valor y otra para establecer el valor. Quiero combinar cosas: una vez que lee el valor, aumenta, comienza desde algún desplazamiento. El desplazamiento puede ser aleatorio, 1000 o 10000, no importa demasiado. Lo único es que debe ser secuencial, para que los usuarios puedan usar el teclado para navegar.

Tal vez puedas darme algún otro consejo sobre cómo diseñar esto. ¡Gracias!