From eb969df88314d838720045a06ded5661f326868f Mon Sep 17 00:00:00 2001
From: Neil Kistner <neil.kistner@gmail.com>
Date: Tue, 24 Nov 2020 20:16:45 -0600
Subject: [PATCH] fix(axes): remove undefined cursor style prop from AxisTick

---
 packages/axes/src/components/AxisTick.tsx | 24 +++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/axes/src/components/AxisTick.tsx b/packages/axes/src/components/AxisTick.tsx
index 717fbeb8e..6407b93a1 100644
--- a/packages/axes/src/components/AxisTick.tsx
+++ b/packages/axes/src/components/AxisTick.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { animated } from 'react-spring'
 import { useTheme } from '@nivo/core'
 import { AxisTickProps } from '../types'
@@ -20,17 +20,21 @@ export const AxisTick = <Value extends string | number | Date>({
         value = format(value)
     }
 
-    const gStyle = {
-        cursor: onClick ? 'pointer' : undefined,
-        opacity: animatedProps.opacity,
-    }
+    const props = useMemo(() => {
+        const style = { opacity: animatedProps.opacity }
+
+        if (!onClick) {
+            return { style }
+        }
+
+        return {
+            style: { ...style, cursor: 'pointer' },
+            onClick: (event: React.MouseEvent<SVGGElement, MouseEvent>) => onClick(event, value),
+        }
+    }, [animatedProps.opacity, onClick, value])
 
     return (
-        <animated.g
-            transform={animatedProps.transform}
-            {...(onClick ? { onClick: e => onClick(e, value) } : {})}
-            style={gStyle}
-        >
+        <animated.g transform={animatedProps.transform} {...props}>
             <line x1={0} x2={lineX} y1={0} y2={lineY} style={theme.axis.ticks.line} />
             <animated.text
                 dominantBaseline={textBaseline}