Remove state management from component (#22)

Author: CarlosNZ

README.md

@@ -10,6 +10,7 @@ Features include:
  - fine-grained control over which elements can be edited, deleted, or added to
  - customisable UI, through simple, pre-defined [themes](#themes), or specific CSS overrides
  - self-contained — rendered with plain HTML/CSS, so no dependance on external UI libraries
+ - provide your own [custom component](#custom-nodes) to integrate specialised UI for certain data.
 
 **[Explore the Demo](https://carlosnz.github.io/json-edit-react/)**
 
@@ -46,14 +47,21 @@ or
 
 ## Implementation
 
-```js
+```jsx
 import { JsonEditor } from 'json-edit-react'
 
 // In your React components:
-<JsonEditor data={ myDataObject } { ...props }>
-
+<JsonEditor
+  data={ myData }
+  onUpdate={ ({newData} ) => {
+    // Set "myData" state, plus
+    // any desired side-effects.
+}}
+{ ...otherProps } />
 ```
 
+You are responsible for maintaining the data state — in your `onUpdate` function, use the `newData` property to set `data`, which should update inside the editor.
+
 ## Usage
 
 **(for end user)**
@@ -68,7 +76,7 @@ It's pretty self explanatory (click the "edit" icon to edit, etc.), but there ar
 
 ## Props overview
 
-The only *required* value is `data`. 
+The only *required* value is `data`.
 
 | prop                    | type                                         | default     | description                                                                                                                                                                                                                                                                                        |
 | ----------------------- | -------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

src/CollectionNode.tsx

@@ -187,7 +187,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
 
   return (
     <div
-      className="jer-component fb-collection-component"
+      className="jer-component jer-collection-component"
       style={{ marginLeft: `${path.length === 0 ? 0 : indent / 2}em` }}
     >
       {CustomNode ? (

src/JsonEditor.tsx

@@ -1,22 +1,16 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import assign from 'object-property-assigner'
 import extract from 'object-property-extractor'
 import clone from 'just-clone'
 import { CollectionNode, isCollection } from './CollectionNode'
-import {
-  CollectionData,
-  JsonEditorProps,
-  FilterFunction,
-  OnChangeFunction,
-  TypeFilterFunction,
-} from './types'
+import { CollectionData, JsonEditorProps, FilterFunction, OnChangeFunction } from './types'
 import { useTheme, ThemeProvider } from './theme'
 import { getTranslateFunction } from './localisation'
 import './style.css'
 import { ValueNodeWrapper } from './ValueNodeWrapper'
 
 const Editor: React.FC<JsonEditorProps> = ({
-  data: srcData,
+  data,
   // schema,
   rootName = 'root',
   onUpdate,
@@ -43,15 +37,10 @@ const Editor: React.FC<JsonEditorProps> = ({
   className,
   customNodeDefinitions = [],
 }) => {
-  const [data, setData] = useState<object>(srcData)
   const { styles, setTheme, setIcons } = useTheme()
   const collapseFilter = useCallback(getFilterFunction(collapse), [collapse])
   const translate = useCallback(getTranslateFunction(translations), [translations])
 
-  useEffect(() => {
-    setData(srcData)
-  }, [srcData])
-
   useEffect(() => {
     if (theme) setTheme(theme)
     if (icons) setIcons(icons)
@@ -74,10 +63,9 @@ const Editor: React.FC<JsonEditorProps> = ({
         name: path.slice(-1)[0],
         path,
       })
-      if (result === undefined) setData(newData)
       if (result === false) return translate('ERROR_UPDATE')
       return result // Error string
-    } else setData(newData)
+    }
   }
 
   const onDelete: OnChangeFunction = async (value, path) => {
@@ -96,10 +84,9 @@ const Editor: React.FC<JsonEditorProps> = ({
         name: path.slice(-1)[0],
         path,
       })
-      if (result === undefined) setData(newData)
       if (result === false) return translate('ERROR_DELETE')
       return result // Error string
-    } else setData(newData)
+    }
   }
 
   const onAdd: OnChangeFunction = async (value, path) => {
@@ -118,10 +105,9 @@ const Editor: React.FC<JsonEditorProps> = ({
         name: path.slice(-1)[0],
         path,
       })
-      if (result === undefined) setData(newData)
       if (result === false) return translate('ERROR_ADD')
       return result // Error string
-    } else setData(newData)
+    }
   }
 
   const restrictEditFilter = getFilterFunction(restrictEdit)