Making a pagination in ReactJS

Question

I've got this code from another thread (how to implement Pagination in reactJs):

  constructor() {
    super();
    this.state = {
      todos: ['a','b','c','d','e','f','g','h','i','j','k'],
      currentPage: 1,
      todosPerPage: 3
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }

  render() {
    const { todos, currentPage, todosPerPage } = this.state;

    // Logic for displaying todos
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

    const renderTodos = currentTodos.map((todo, index) => {
      return <li key={index}>{todo}</li>;
    });

    // Logic for displaying page numbers
    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) {
      pageNumbers.push(i);
    }

    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <li
          key={number}
          id={number}
          onClick={this.handleClick}
        >
          {number}
        </li>
      );
    });

    return (
      <div>
        <ul>
          {renderTodos}
        </ul>
        <ul id="page-numbers">
          {renderPageNumbers}
        </ul>
      </div>
    );
  }
}


ReactDOM.render(
  <TodoApp />,
  document.getElementById('app')
);

The pagination works fine, but the "todos" is an array of strings, while my data is an array of objects in a js file like this:

const vehiclesData = [
    {
        id: 1,
        brand: "BMW",
        model: "X5",
    },
    {
        id: 2,
        brand: "Audi",
        model: "RS6",
    },
    {
        id: 3,
        brand: "Ford",
        model: "Shelby GT350",
    },
    {
        id: 4,
        brand: "Volkswagen",
        model: "Golf VI",
    },
    {
        id: 5,
        brand: "Chevrolet",
        model: "Camaro",
    }
]

export default vehiclesData;

I have been trying to do this myself but no luck. I'm just starting to teach myself react. How can I edit the code to include my data instead? Any help would be much appreciated.

score 0 · Answer 1 · answered Feb 11 '19 at 21:03

0

This should now be rendering whatever list you want. In your case you have a array of objects. With the map it behaves like a forloop by going through each item. With each item now you can return a li Tag element which has the vehicle.brand or vehicle.model... hope this makes sense

const renderVehiclesData  = vehiclesData .map((vehicle, index) => {
  return <li key={index}>{vehicle.brand}</li>;
});

answered Feb 11 '19 at 21:03

divyanshch

390
5
15

Thank you, however with this code it renders all the vehicles at once. It does not stop at the todosPerPage: 3; – matje Feb 11 '19 at 21:12
ahh in that case just turn vehiclesData to currentTodos – divyanshch Feb 11 '19 at 21:50

score 0 · Answer 2 · answered Feb 11 '19 at 21:06

your code should be something like this


const vehiclesData = [
    {
        id: 1,
        brand: "BMW",
        model: "X5",
    },
    {
        id: 2,
        brand: "Audi",
        model: "RS6",
    },
    {
        id: 3,
        brand: "Ford",
        model: "Shelby GT350",
    },
    {
        id: 4,
        brand: "Volkswagen",
        model: "Golf VI",
    },
    {
        id: 5,
        brand: "Chevrolet",
        model: "Camaro",
    }
]
    class TodoApp extends React.Component {
      constructor() {
        super();
        this.state = {
          vehiclesData,
          currentPage: 1,
          todosPerPage: 3
        };
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick(event) {
        this.setState({
          currentPage: Number(event.target.id)
        });
      }

      render() {
        const { vehiclesData, currentPage, todosPerPage } = this.state;

        // Logic for displaying current todos
        const indexOfLastTodo = currentPage * todosPerPage;
        const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
        const currentTodos = vehiclesData.slice(indexOfFirstTodo, indexOfLastTodo);

        const renderTodos = currentTodos.map((vd, index) => {
          return <li key={index}>{vd.brand} {vd.model}</li>;
        });

        // Logic for displaying page numbers
        const pageNumbers = [];
        for (let i = 1; i <= Math.ceil(vehiclesData.length / todosPerPage); i++) {
          pageNumbers.push(i);
        }

        const renderPageNumbers = pageNumbers.map(number => {
          return (
            <li
              key={number}
              id={number}
              onClick={this.handleClick}
            >
              {number}
            </li>
          );
        });

        return (
          <div>
            <ul>
              {renderTodos}
            </ul>
            <ul id="page-numbers">
              {renderPageNumbers}
            </ul>
          </div>
        );
      }
    }


    ReactDOM.render(
      <TodoApp />,
      document.getElementById('app')
    );

here is a modified version

Making a pagination in ReactJS

2 Answers2