Print numbers inside react component with map?

Question

This is probably an easy one, but I can't seem to figure it out. How do I print the numbers in order inside my list? If I print index some of the numbers will be skipped due to my conditions? Can I set a count++ somewhere inside my map-function inside my condition so it will increase every time a list-item is printed?

export const MFAPaging = ({rootStore, page}) => {
  let count = 1;

  return (
    <div className="components-paging-brder">
      <div className="components-paging">
        <ul>
          {rootStore.mfaStore.links.map((item, index) =>
              item && item.includePage ? 
              <li className={page == index ? 'active' : ''} key={index}>{count}</li>
              : undefined 
            )}
        </ul>
        <MFAButtons rootStore={rootStore} page={page} />
    </div>
  </div>
  );
};

Answer 1

First you can filter the array, and then your indexes will be cool in your .map (never use .map to filter, you already have build-in functions)

{rootStore.mfaStore.links.filter((item)=> item && item.includePage).map((item, index) =>
    <li className={page == index ? 'active' : ''} key={index}>{count}</li>
)}

For questions comment :)