NavButton.tsx

import React, {useContext} from 'react';
import usePoetry from "./usePoetry";
import {PageContext} from "./MainPage";
import leftarrow from "../Media/left-arrow.png";
import rightarrow from "../Media/right-arrow.png";

type props = {
  direction: string;
}

const NavButton = (props: props) => {
  const context = useContext(PageContext);
  console.log(context);

  const onClick = () => {
    const increment: boolean = props.direction == "right";
    context.changePage(increment);
  };

  return (
    <img
      src={props.direction === "right" ? rightarrow : leftarrow}
      style={{ width: '4rem', height: '4rem' }}
      onClick={onClick}
    />
    // <button onClick={onClick}>{props.direction}</button>
  )
};

export default NavButton;