用地图打印反应组件内的数字？

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

Answer 2

You have to increment the count variable on each iteration. You can try the following. It should solve your problem.

<li className={page == index ? 'active' : ''} key={index}>{count++}</li>

++ at the end is important. count++ will first read the current count variable's value then increment its value.

Answer 3

Try to use foreach, because if u try to use map, your result will be like a array with some undefined values: [<li></li>, undefined, <li></li>] , and foreach prevent it.

const renderList = ({fullList}) => {
  let counter = 0;
  const renderList = [];
  list.foreach((data, index) => {
    if (data && data.includePage) renderList.push(<li>{++counter}</li>);
  });
  return renderList;
}