React - How to clean up this component?

JavaScript
1

Hey guys, I have a shared button here that is paginating data on a click. How can I clean this up? Not sure if I should extract the onClick function out and pass through props?

import { useContext } from 'react';
import { MoviesContext } from '../../context/moviesContext';

const Button = ({ type, text }) => {
  // Contexts
  const { movies, currentPage, setCurrentPage, totalPages, query } = useContext(
    MoviesContext
  );

  const disabledPrev = query && movies && currentPage === 1 && 'disabled';
  const disabledNext =
    query && movies && currentPage === totalPages && 'disabled';

  const prevPage = () => {
    if (movies && currentPage !== 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const nextPage = () => {
    if (movies && currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  return (
    <div className="Button">
      <button
        onClick={type === 'Prev' ? prevPage : nextPage}
        disabled={type === 'Prev' ? disabledPrev : disabledNext}
      >
        {text}
      </button>
    </div>
  );
};

export default Button;
2

Hi, @rstorms

Yes, you can remove all the dependencies from your button and pass all the needed parameters via props. It will be an optimal implementation because your button won’t have any side effects.
For example, you can have the Button interface like:

<Button onClick={func} disabled={boolean} {...otherNeededProps}>
  Button name
<Button>
1 Like