remove UNSAFE_componentWillReceiveProps, close bl00mber#124 (bl00mber#331)

Author: abrahampost

src/index.js

@@ -240,12 +240,12 @@ class PhoneInput extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.country !== this.props.country) {
-      this.updateCountry(nextProps.country);
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (prevProps.country !== this.props.country) {
+      this.updateCountry(this.props.country);
     }
-    else if (nextProps.value !== this.props.value) {
-      this.updateFormattedNumber(nextProps.value);
+    else if (prevProps.value !== this.props.value) {
+      this.updateFormattedNumber(this.props.value);
     }
   }
 

test/ReactPhoneInput.test.js

@@ -188,6 +188,26 @@ describe('correct value update', () => {
     expect(phoneInput.querySelector('.selected-flag').children[0].className).toBe('flag 0')
   })
 
+  test('should rerender country without crashing', () => {
+    const { container: phoneInput, rerender } = render(
+      <PhoneInput
+        country={undefined}
+      />)
+
+    rerender(
+      <PhoneInput
+        country="us"
+      />)
+
+    rerender(
+      <PhoneInput
+        country="es"
+      />)
+
+    expect(phoneInput.querySelector('.selected-flag').children.length).toBe(1)
+    expect(phoneInput.querySelector('.selected-flag').children[0].className).toBe('flag es')
+  })
+
   it('renders one prefix when updated from empty value', () => {
     const { container: phoneInput, rerender } = render(
       <PhoneInput