Rendering with array.map not working: Return statement in map returning undefined

Question

I am implementing a pagination in a react project and am having problems returning a set of li elements within an ul. In the console, the renderPageNumbers return undefined, while I am able to see the array passed and logs out each element map iterator. The arrow li's show up on the page, but the li's that are suppose to go in between do not.

I believe I'm returning in the map statement correctly, so I don't know what I need to do to make this work.

RenderPagination is called in the render method in the component.

Here is my simplified code:

renderPageNumbers(pageNumbersArray) {

  pageNumbersArray.map((pageNumber, index) => {
    return (
      <li key={index}><a href=""></a>{pageNumber}</li>
    );
  });
}

renderPagination() {
      const { cardsPerPage } = this.state;
      const cards = this.props.cards;

      const pageNumbersArray = [];
      for (let i = 1; i <= Math.ceil(Object.keys(cards).length / cardsPerPage); i++) {
        pageNumbersArray.push(i);
      }

      return (
        <div>
        <ul className="pagination">
          <li><a href=""><i className="fa fa-angle-double-left"></i></a></li>
          {this.renderPageNumbers(pageNumbersArray)}
          <li><a href=""><i className="fa fa-angle-double-right"></i></a></li>
        </ul>
        </div>
      );
    }
  }

Answer 1

You have used map, map is an array method to convert each element on an array to something else and return a new array, therefore you need to return that new array from the renderPageNumbers function.

renderPageNumbers(pageNumbersArray) {

   return pageNumbersArray.map((pageNumber, index) => {
      return (
         <li key={index}><a href=""></a>{pageNumber}</li>
      );
   });
}