should change value when props.value changed

src/CalculatorInput.tsx

@@ -67,6 +67,18 @@ interface State {
   text: string
 }
 
+function propsToState(props: CalculatorInputProps): Partial<State> {
+  const value = props.value || 0
+  return {
+    value: props.value || 0,
+    text: formatNumber(
+      value,
+      props.decimalSeparator as string,
+      props.thousandSeparator as string
+    )
+  }
+}
+
 export class CalculatorInput extends React.Component<
   CalculatorInputProps,
   State
@@ -77,20 +89,23 @@ export class CalculatorInput extends React.Component<
     prefix: ''
   }
 
+  static getDerivedStateFromProps(
+    props: CalculatorInputProps,
+    state: State
+  ): Partial<State> | null {
+    if (props.value !== state.value) {
+      return propsToState(props)
+    }
+    return null
+  }
+
   constructor(props: CalculatorInputProps) {
     super(props)
 
-    const value = props.value || 0
-
     this.calculatorModalToggle = this.calculatorModalToggle.bind(this)
     this.state = {
-      modalVisible: false,
-      value,
-      text: formatNumber(
-        value,
-        props.decimalSeparator as string,
-        props.thousandSeparator as string
-      )
+      ...(propsToState(props) as State),
+      modalVisible: false
     }
   }