From 0ae52223dc1d8c5ac135ebcfd906c9abaa196e15 Mon Sep 17 00:00:00 2001
From: Bruno Fenzl <brunofenzl@gmail.com>
Date: Fri, 25 Sep 2020 10:12:14 +0200
Subject: [PATCH] Replaced componentWillreceiveProps with
 getDerivedStateFromProps

---
 .../react-json-tree/src/JSONNestedNode.tsx     |  7 ++++---
 packages/react-json-tree/src/index.tsx         | 18 +++++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx
index e8dbb261..5256ecf6 100644
--- a/packages/react-json-tree/src/JSONNestedNode.tsx
+++ b/packages/react-json-tree/src/JSONNestedNode.tsx
@@ -145,11 +145,12 @@ export default class JSONNestedNode extends React.Component<Props, State> {
     this.state = getStateFromProps(props);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+  static getDerivedStateFromProps(nextProps: Props, state: State): State | null {
     const nextState = getStateFromProps(nextProps);
-    if (getStateFromProps(this.props).expanded !== nextState.expanded) {
-      this.setState(nextState);
+    if (nextState.expanded !== state.expanded) {
+      return nextState;
     }
+    return null;
   }
 
   shouldComponentUpdate(nextProps: Props, nextState: State) {
diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx
index 50a5524b..70cfffdd 100644
--- a/packages/react-json-tree/src/index.tsx
+++ b/packages/react-json-tree/src/index.tsx
@@ -16,13 +16,15 @@ import {
 } from 'react-base16-styling';
 import { CircularPropsPassedThroughJSONTree } from './types';
 
-interface Props extends CircularPropsPassedThroughJSONTree {
-  data: any;
+interface ThemesConf {
   theme?: Theme;
-  invertTheme: boolean;
+  invertTheme?: boolean;
+}
+interface Props extends CircularPropsPassedThroughJSONTree, ThemesConf {
+  data: any;
 }
 
-interface State {
+interface State extends ThemesConf {
   styling: StylingFunction;
 }
 
@@ -133,14 +135,16 @@ export default class JSONTree extends React.Component<Props, State> {
     this.state = getStateFromProps(props);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+  static getDerivedStateFromProps(nextProps: Props, state: State): State | null {
     if (
       ['theme', 'invertTheme'].find(
-        (k) => nextProps[k as keyof Props] !== this.props[k as keyof Props]
+        (k) => nextProps[k as keyof ThemesConf] !== state[k as keyof ThemesConf]
       )
     ) {
-      this.setState(getStateFromProps(nextProps));
+      return getStateFromProps(nextProps);
     }
+
+    return null;
   }
 
   shouldComponentUpdate(nextProps: Props) {