React marking which page i'm on - reactjs

Question

I'd like for my app to indicate which page I'm currently on. Page numbers get calculated based on the length of an array, and when I move between them, the current page would have a different background. The current page is saved inside the state as well as in local storage.
So I have a CSS class .mark-page {background-color} and I thought I'd just make a ternary inside the button, but it didn't work, however, I'm not sure which parameters to input. Any ideas?
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(allFacts.length / factsPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map((number) => {
return (
<button key={number} id={number} onClick={this.handleClick}>
{number}
</button>
);
});
return <div id="paging">{renderPageNumbers}</div>;

Answer 1

#KavinduVindika sure, posting here because it won't let me edit my post:
class Body extends React.Component {
constructor() {
super()
this.state = {
isLoading: true,
allFacts: [],
currentPage: null,
factsPerPage: 15,
error: null,
}
this.handleClick = this.handleClick.bind(this)
}
componentDidMount() {
gets API, saves it into state and sets currentPage to 1 if the page had just
loaded }
handleClick(event) {
this.setState ({
currentPage: localStorage.getItem("currentPage")
})
let currentPage = Number(event.target.id)
localStorage.setItem("currentPage", JSON.stringify(currentPage))
this.setState ({currentPage: currentPage})
}
render() {
const {allFacts, currentPage, factsPerPage } = this.state
const indexOfLastFact = currentPage * factsPerPage
const indexOfFirstFact = indexOfLastFact - factsPerPage
const allFactsSliced = allFacts.slice(indexOfFirstFact, indexOfLastFact)
console.log(allFactsSliced)
const renderAllFacts = this.state.isLoading ?
<div id="loading"><h3 className="fact-div" >Please wait.<br/> The cats are disclosing their secrets.</h3></div> :
allFactsSliced.map((fact, index) => {
return <div className="fact-div" key={index}>
<p className="fact-num">Fact # {(index+1) + (currentPage-1) * factsPerPage}:</p>
<p className="fact-txt">{fact.fact}</p>
</div>
})
hope this is all the important bits