From e9cda6cd7ffe11d6f6cf1794c61368c201c6dd69 Mon Sep 17 00:00:00 2001
From: sowmiyamuthuraman <32141844+sowmiyamuthuraman@users.noreply.github.com>
Date: Thu, 22 Oct 2020 16:17:10 +0530
Subject: [PATCH] Migrate string refs to functional ones in brand_image_setting
 component (#6687)

---
 .../brand_image_setting/brand_image_setting.jsx   | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/admin_console/brand_image_setting/brand_image_setting.jsx b/components/admin_console/brand_image_setting/brand_image_setting.jsx
index 6568b92131fd..349ab345f73f 100644
--- a/components/admin_console/brand_image_setting/brand_image_setting.jsx
+++ b/components/admin_console/brand_image_setting/brand_image_setting.jsx
@@ -1,6 +1,5 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-/* eslint-disable react/no-string-refs */
 
 import $ from 'jquery';
 import PropTypes from 'prop-types';
@@ -55,6 +54,9 @@ export default class BrandImageSetting extends React.PureComponent {
             brandImageTimestamp: Date.now(),
             error: '',
         };
+
+        this.imageRef = React.createRef();
+        this.fileInputRef = React.createRef();
     }
 
     componentDidMount() {
@@ -76,10 +78,10 @@ export default class BrandImageSetting extends React.PureComponent {
     }
 
     componentDidUpdate() {
-        if (this.refs.image) {
+        if (this.imageRef.current) {
             const reader = new FileReader();
 
-            const img = this.refs.image;
+            const img = this.imageRef.current;
             reader.onload = (e) => {
                 $(img).attr('src', e.target.result); // eslint-disable-line jquery/no-attr
             };
@@ -89,7 +91,7 @@ export default class BrandImageSetting extends React.PureComponent {
     }
 
     handleImageChange = () => {
-        const element = $(this.refs.fileInput);
+        const element = $(this.fileInputRef.current);
         if (element.prop('files').length > 0) {
             this.props.setSaveNeeded();
             this.setState({
@@ -158,7 +160,7 @@ export default class BrandImageSetting extends React.PureComponent {
             img = (
                 <div className='remove-image__img mb-5'>
                     <img
-                        ref='image'
+                        ref={this.imageRef}
                         alt='brand image'
                         src=''
                     />
@@ -240,7 +242,7 @@ export default class BrandImageSetting extends React.PureComponent {
                             />
                         </button>
                         <input
-                            ref='fileInput'
+                            ref={this.fileInputRef}
                             type='file'
                             accept='.jpg,.png,.bmp'
                             disabled={this.props.disabled}
@@ -260,4 +262,3 @@ export default class BrandImageSetting extends React.PureComponent {
         );
     }
 }
-/* eslint-enable react/no-string-refs */