Rendering <li></> with array.map not working: Return statement in map returning undefined [duplicate]

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>
      );
    }
  }

<li key={index}><a href="">{pageNumber}</a></li> a tag should close after {pageNumber} — Subin Sebastian
– Subin Sebastian, Commented May 15, 2018 at 3:49

felixmosh · Accepted Answer · 2018-05-15 04:57:20Z

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>
      );
   });
}

edited May 15, 2018 at 4:57

answered May 15, 2018 at 4:05

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bigmugcup Over a year ago

I see. It worked. Thanks so much!

Collectives™ on Stack Overflow

Rendering <li></> with array.map not working: Return statement in map returning undefined [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related