score:1

Accepted answer
import React, { Component } from 'react';

class Pagination extends Component {
    render() {
        return (
            <div>
                <ul className="pagination justify-content-center">
                    {Array(this.props.pages)
                        .fill()
                        .map((el, index) => {
                            const valueForFilter = (index + 1) * 10;
                            return (
                                <li key={index} className="page-item">
                                    <a class="page-link" href="#" onClick={() => this.props.filter(valueForFilter)}>
                                        {index + 1}
                                    </a>
                                </li>
                            );
                        })}
                </ul>
            </div>
        );
    }
}

export default Pagination;

score:2

import React, { Component } from 'react'

class Pagination extends Component {
    constructor(props) {
        super(props);
        this.state = { indents: [] };
    }
    componentDidMount() {
        vat indents = [];
        for (var i = 0; i < this.props.pages; i++) {
            indents.push(<li key={i} className="page-item"><a class="page-link"  onClick={() => this.props.filter((i+1)*10)}>{i+1}</a></li>);
        }
        this.setState({ indents: indents });
    }
    render() {
        return (
            <div>
                <ul className="pagination justify-content-center">
                    {indents}
                </ul>
            </div>
        )
    }
}

export default Pagination

Related Query

More Query from same tag