diff --git a/src/components/JSONPathPicker/index.tsx b/src/components/JSONPathPicker/index.tsx
index 8b243bf0..bad9383b 100644
--- a/src/components/JSONPathPicker/index.tsx
+++ b/src/components/JSONPathPicker/index.tsx
@@ -1,3 +1,4 @@
+import noop from 'lodash/noop'
 import { recursiveRender } from './utils'
 import { useStyles } from './styles'
 import React, { FC } from 'react'
@@ -19,39 +20,17 @@ export interface JSONPathPickerProps {
 export const JSONPathPicker: FC<JSONPathPickerProps> = ({
 	json,
 	path,
-	onChange
+	onChange = noop
 }: JSONPathPickerProps) => {
 	const classes = useStyles()
 
-	const onClick = (e: any) => {
-		const target = e.target
-
-		if (target.hasAttribute('data-json-path')) {
-			const jsonPath = target.getAttribute('data-json-path')
-			// let choosenPath
-
-			// if (target.hasAttribute('data-choosearr')) {
-			// 	const tmp = getPathArr(path)
-
-			// 	const idx = getPathArr(pathKey).length
-			// 	tmp[idx] = '[*]'
-			// 	choosenPath = tmp.join('')
-			// } else {
-			// choosenPath = pathKey
-			// }
-
-			// onChange && onChange(choosenPath)
-			onChange && onChange(jsonPath)
-		}
-	}
-
 	return (
 		<div className={classes.container}>
 			{recursiveRender({
 				classes,
 				currPath: '$',
 				isLastItem: true,
-				onClick,
+				onChange,
 				pickedPath: path || '',
 				remainingJSON: json
 			})}
diff --git a/src/components/JSONPathPicker/utils.tsx b/src/components/JSONPathPicker/utils.tsx
index f5be0fe6..fc8c1608 100644
--- a/src/components/JSONPathPicker/utils.tsx
+++ b/src/components/JSONPathPicker/utils.tsx
@@ -1,6 +1,5 @@
 import { Classes } from './styles'
 import isNull from 'lodash/isNull'
-import isUndefined from 'lodash/isUndefined'
 import { JSONValue } from '.'
 import React, { ReactNode } from 'react'
 
@@ -20,13 +19,10 @@ interface RenderParams {
 	pickedPath: string
 	isLastItem?: boolean
 	currPath?: string
-	onClick: (e: any) => void
+	onChange: (pickedPath: string) => void
 	remainingJSON: JSONValue | Record<string, JSONValue>
 }
 
-const getPathArr = (path = ''): string[] =>
-	path.match(/(\..+?)|(\[.+?\])/g) || []
-
 const renderComma = ({
 	classes,
 	isLastItem
@@ -36,7 +32,7 @@ const renderComma = ({
 const renderArray = ({
 	classes,
 	isLastItem,
-	onClick,
+	onChange,
 	pickedPath,
 	currPath,
 	remainingJSON
@@ -60,7 +56,7 @@ const renderArray = ({
 									classes,
 									currPath: `${currPath}[${i}]`,
 									isLastItem: arr.length - 1 === i,
-									onClick,
+									onChange,
 									pickedPath,
 									remainingJSON: item
 								})}
@@ -115,7 +111,7 @@ const renderString = ({
 const renderObject = ({
 	classes,
 	isLastItem,
-	onClick,
+	onChange,
 	pickedPath,
 	remainingJSON,
 	currPath
@@ -131,15 +127,14 @@ const renderObject = ({
 					<li key={i}>
 						<span
 							className={classes.property}
-							data-json-path={`${currPath}.${key}`}
-							onClick={onClick}
+							onClick={() => onChange(`${currPath}.${key}`)}
 						>{`"${key}"`}</span>
 						<span className={classes.operator}>:</span>
 						{recursiveRender({
 							classes,
 							currPath: `${currPath}.${key}`,
 							isLastItem: remainingKeys.length - 1 === i,
-							onClick,
+							onChange,
 							pickedPath,
 							remainingJSON: json[key]
 						})}
@@ -182,14 +177,14 @@ export const recursiveRender = ({
 	pickedPath,
 	isLastItem,
 	currPath,
-	onClick,
+	onChange,
 	remainingJSON
 }: RenderParams): ReactNode =>
 	mappedTypesToRenderFns[getRemainingJSONType(remainingJSON)]({
 		classes,
 		currPath,
 		isLastItem,
-		onClick,
+		onChange,
 		pickedPath,
 		remainingJSON
 	})