score:-1

function App() {
    const [plyViewed, setPlyViewed] = useState(0);
    <MoveButtons
        plyViewed={plyViewed}
        setPlyViewed={setPlyViewed}
    />
}

export default function MoveButtons(props) {
    useEffect(() => {
        props.board.current.setPosition(props.fenHistory[props.plyViewed]);
        props.setFen(props.fenHistory[props.plyViewed]);
        props.setSelectedIndex(props.plyViewed);
    }, [props.plyViewed, props.fenHistory]);
    return (
    <Grid item xs={6}>
      <Button
        variant="contained"
        color="primary"
        size="large"
        style={{ maxWidth: props.buttonWidth, minWidth: props.buttonWidth }}
        onClick={() => {
          if (props.plyViewed > 0) {
            props.plyViewed--;
          }
        }}
      >
        <NavigateBeforeIcon />
      </Button>
      <Button
        variant="contained"
        color="primary"
        size="large"
        style={{ maxWidth: props.buttonWidth, minWidth: props.buttonWidth }}
        onClick={() => {
        if (props.plyViewed < props.fenHistory.length - 1) {
          props.plyViewed++;
        }}
      >
        <NavigateNextIcon />
      </Button>
    </Grid>
  );

score:1

const App = () => {
  const [plyViewed, setPlyViewed] = useState(0);
  const [position, setPosition] = useState(null);

  useEffect(() => {
    fetchPosition(plyViewed).then((newPosition) => setPosition(newPosition));
  }, [plyViewed]);

Related Query

More Query from same tag