show 10 results per page

Question

I want to implement pagination to show the results of car. Per page shows 10 results. I could fetch the result from an API. I could also show the pagination button as per the number of results to show per page. I have no idea on how can i fetch 10 result per page.

What i have done till now

export function showResultofCar(cityFrom, cityTo, date, paisFrom, paisTo) {
  return (dispatch) => {
    dispatch({ type: 'CAR_FETCH_START' });
    const token = localStorage.getItem('token');
    return axios.get(`${API_URL}/newoffers/car/{"cityFrom":"${cityFrom}","cityTo":"${cityTo}","date":${date},"paisFrom":"${paisFrom}","paisTo":"${paisTo}"}.json/null/${token}`)
      .then((response) => {
        setTimeout(() => {
          dispatch({ type: 'CAR_FETCH_SUCCESS', payload: response.data });
        }, 1500);
      })
      .catch((err) => {
        dispatch({ type: 'CAR_FETCH_FAILURE', payload: err });
      });
  };
}

reducer.js

export function getCarResult(state = initialState, action) {
  switch (action.type) {
    case 'CAR_FETCH_START':
      return { ...state, fetching: true };
    case 'CAR_FETCH_SUCCESS':
      cars = action.payload;
      return {
              ...state,
              fetched: true,
              fetching: false,
              cars: action.payload,
              currentPage: 0,
              carsLength: action.payload.length
             };
    case 'CAR_FETCH_WITH_FILTER':
      return { ...state, fetched: true, fetching: false, cars: carFilterFromPrice(action.payload) };
    case 'CAR_FETCH_FAILURE':
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

car-result.js

function renderCarList(cars, cityOrigen, cityDestino) {
  if (cars.length > 0) {
    return _.map(cars, (car) => (
      <CarResultList
        key={car.provider_id}
        car={car}
        cityOrigen={cityOrigen}
        cityDestino={cityDestino}
      />
    ));
  }
  return <p> No Car to show </p>;
}

const CarResultList = ({ car, cityOrigen, cityDestino }) =>
<div className="car-result-list">
  <Row className="show-grid" style={{ marginTop: 10, marginBottom: 10 }}>
    <Col xs={12} sm={12} md={8}>
      <h3>{car.car}</h3>
      <p className="sub">{cityOrigen}-{cityDestino}</p>
    </Col>
  </Row>
</div>;

class CarResult extends Component {
  render() {
    const { carResult, origen, destino } = this.props;
    const cityOrigen = origen && origen.label.split(', ')[0];
    const cityDestino = destino && destino.label.split(', ')[0];
    const carResultList = renderCarList(carResult.cars, cityOrigen, cityDestino);
    if (!carResult.fetching) {
      return (
        <div>
          <div className="car-result-container">
            <Grid fluid>
              <Row>
                <Col xs={12} sm={12} md={6}>
                  {carResultList}
                  {carResult.carsLength > 10 ?
                    <CarPagination numberOfCar={carResult.carsLength} /> :
                    ''
                  }
                </Col>
              </Row>
            </Grid>
          </div>
        </div>
      );
    }
    return (
      loading component
    );
  }

pagination.js

export default function Pagination(props) {
  const range = [];
  for (let i = 0; i < Math.ceil(props.numberOfCar / 10); i++) {
    range.push(i);
  }
  const numberOfButtonToShow = _.map(range, r =>
    <li className="page-number" key={r}>
      <a href="" className="page-link"> {r + 1} </a>
    </li>
  );
  return (
    <div className="pagination-btns">
      {numberOfButtonToShow}
    </div>
  );
}

right now i get all (38) items. How can i make my pagination work?

algorithm for showing data(it does not work for last page, i mean if there is 38 number of results then there will be 4 page, where each page will have 10 content only last page will have 8 content ).

[currentPage * 10 , ((currentPage +1)*9)+currentPage] -> [0,9] for page 1 and [10, 19] for page 2 but problem in last page