Блог

Я бы хотел, чтобы мое приложение указывало, на какой странице я сейчас нахожусь. Номера страниц вычисляются на основе длины массива, и когда я перемещаюсь между ними, текущая страница будет иметь другой фон. Текущая страница сохраняется как в состоянии, так и в локальном хранилище.

Итак, у меня есть класс CSS .mark-страница {цвет фона}, и я подумал, что просто сделаю тройку внутри кнопки, но это не сработало, однако я не уверен, какие параметры вводить. Есть какие-нибудь идеи?

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

@KavinduVindika конечно, публикую здесь, потому что это не позволит мне редактировать мой пост:

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

надеюсь, это все важные детали