How to use Tinypaginator with fontawesome in ReactJS? - reactjs

Question

I'm using a library called TinyPagination (react-pagination-custom) and I have two problems now:
The first is that apparently, Tinypagination receives a string in preKey and nextKey and I need to send two icons here. The problem is not that, because if the code is as follows:
<TinyPagination
total={count}
selectedPageId={selectedPageId}
itemPerPage={itemPerPage}
renderBtnNumber={this.renderBtnNumber}
maxBtnNumbers={maxBtnNumbers}
preKey="PREV"
nextKey="NEXT"
wrapClass="pageContainer"
btnsClass="btnsContainer"
maxBtnPerSide={2}
/>
It works perfect. However, my current code with the call to the component is the following:
<TinyPagination
total={count}
selectedPageId={selectedPageId}
itemPerPage={itemPerPage}
renderBtnNumber={this.renderBtnNumber}
maxBtnNumbers={maxBtnNumbers}
preKey={
<FontAwesomeIcon icon="angle-left" className={leftArrowPaginador} value="angle-left" />
}
nextKey={
<FontAwesomeIcon
icon="angle-right"
className="angle-right"
value="angle-right"
/>
}
wrapClass="pageContainer"
btnsClass="btnsContainer"
maxBtnPerSide={2}
/>
The first problem comes the moment I give the page "back" and then the "next" page, since a new "<" button is created every time I do the same process. (This does not happen when I send "PREV" and "NEXT" respectively)
The message in exit console(chrome) when this problem occurs is:
"Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and / or omitted - the behavior is unsupported and could change in a future version."
My original code:
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import './style.css';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { TinyPagination } from '../../../node_modules/react-pagination-custom';
const query = gql`
query posts($first: Int) {
posts(first: $first) {
rows {
id
titulo
image_intro
category {
id
}
}
count
}
}
`;
let selectedArrow;
export class PaginatorScreen extends Component {
constructor(props) {
super(props);
this.state = { ...props };
this.changePage = this.changePage.bind(this);
this.renderBtnNumber = this.renderBtnNumber.bind(this);
this.selectedPageId = props.selectedPageId;
}
changePage = id => {
this.setState(prevState => ({ ...prevState, selectedPageId: id }));
};
buttonPageClick(id) {
selectedArrow = id;
if (typeof id.props !== 'undefined') {
selectedArrow = id.props.value;
}
const { selectedPageId } = this.state;
switch (selectedArrow) {
case 'angle-left':
this.changePage(selectedPageId - 1);
break;
case 'angle-right':
this.changePage(selectedPageId + 1);
break;
default:
this.changePage(id);
break;
}
}
renderBtnNumber(id) {
const { selectedPageId } = this.state;
return (
<button
type="button"
onClick={this.buttonPageClick.bind(this, id)}
key={id}
className={`page ${selectedPageId === id ? 'selectedPage' : ''}`}>
{id}
</button>
);
}
render() {
const { selectedPageId } = this.state;
const itemPerPage = 16;
const maxBtnNumbers = 10;
const { data } = this.props;
if (data.loading) {
return <div>Loading...</div>;
}
if (data.error) {
return <div>{data.error.message}</div>;
}
if (data.posts.rows.length <= 0) {
return <div>Nada que mostrar...</div>;
}
const {
data: {
posts: { count },
},
} = this.props;
let listShow = [...data.posts.rows];
listShow = listShow.splice((selectedPageId - 1) * itemPerPage, itemPerPage);
let { leftArrowPaginador } = 'angle-left';
leftArrowPaginador = selectedPageId === 1 ? 'angle-left-disabled' : 'angle-left';
return (
<div>
{listShow.map(i => (
<Link to={`/noticias/detalle/${i.category.id}/${i.id}/`} key={i.id}>
<h3>{i.titulo}</h3>
<img
alt={i.titulo}
src={process.env.REACT_APP_IMG_BASE + i.imagen_intro}
width={500}
/>
</Link>
))}
<TinyPagination
total={count}
selectedPageId={selectedPageId}
itemPerPage={itemPerPage}
renderBtnNumber={this.renderBtnNumber}
maxBtnNumbers={maxBtnNumbers}
preKey={
<FontAwesomeIcon icon="angle-left" className={leftArrowPaginador} value="angle-left" />
}
nextKey={
<FontAwesomeIcon
icon="angle-right"
className="angle-right"
value="angle-right"
/>
}
wrapClass="pageContainer"
btnsClass="btnsContainer"
counterStyle={{ color: 'gray' }}
spreadClass="spread-container"
spreadStyle={{ padding: '0 0px' }}
maxBtnPerSide={2}
/>
</div>
);
}
}
PaginatorScreen.propTypes = {
selectedPageId: PropTypes.number,
data: PropTypes.shape({
loading: PropTypes.bool.isRequired,
error: PropTypes.shape({ message: PropTypes.string }),
}).isRequired,
};
PaginatorScreen.defaultProps = {
selectedPageId: 2,
};
const queryOptions = {
options: props => ({
variables: {
categoryId: props.categoryId,
first: props.first,
},
}),
};
export default graphql(query, queryOptions)(PaginatorScreen);
I wish that this bug is not present when clicking on "Back" and "Next". The problem that I have detected apparently is due to the fontawesome and the switch that exists in the code because as I mentioned, when I put "NEXT" and "PREV" it works correctly.
The second result I want is, when the page is equal to one, I want the "angle-left" icon to be shown but with the className = "angle-left-disabled".
For this I made the following variable, but it does not work when I put it in preKey:
    leftArrowPaginador = selectedPageId === 1? 'angle-left-disabled': 'angle-left';

Answer 1

The problem seems to be in your renderBtnNumber function. When it is called for the prev/next buttons, it takes an "id" of the component. It then uses this as the key.
In order to make it work, you need to check inside the function whether the "id" is a component and if it is, use a different value for key (e.g. "Prev", or "Next").