How to add html i tag with next and previous button in react-pagination package

user_9818223 0
Viewed 619

Here is my code :

                         <ReactPaginate
                            previousLabel={'Previous'}
                            nextLabel={'Next'}
                            breakLabel={"..."}
                            breakClassName={"break-me"}
                            pageCount={this.state.pageCount}
                            marginPagesDisplayed={2}
                            pageRangeDisplayed={5}
                            onPageChange={this.handlePageClick}
                            containerClassName={"pagination"}
                            pageClassName={'page-item'}
                            subContainerClassName={"page-item"}
                            activeClassName={"active"}
                            pageLinkClassName={'page-link'}
                        />

I want to add html i tag with previousLabel and with nextlabel

reactjs
1 Answers

nextLabel accepts a node.

enter image description here

So you can use jsx within the curly bracket.

nextLabel={<i your icon node here />}

or using image (example)

nextLabel={<img src={image url} />}

or icon with Text

previousLabel={<div><i class="fa fa-arrow-left" aria-hidden="true" />Previous</div>}
user_28220410
Related