Mattermost-server: Migrate string-refs to functional ones: this.refs.image

[Willyfrog]

Context:

String references are deprecated in React, and they will eventually disappear. Since React 16.3 there is the new api to use for reference creation createRef which improved the way to handle them greatly. Callbacks refs still have some valid usage, so we might make exceptions with those, please raise the issue if you feel you need to use them.

How to migrate

Go to ./components/adminconsole/brand_image_setting/brand_imagesetting.jsx and look for usage of this.refs.image. Once you find them:

1. Remove usage this.refs.some-reference
2. Add a this.some-reference = React.createRef()
3. Change code depending on this.refs.some-reference into using this.some-reference.current. Be aware that this might be accessed by files other than the one that defined it. Also, you might need to refactor the code to keep behaviour the same.
4. If there are e2e tests using that functionality run them to ensure it works as expected. Optionally consider adding any new tests that might ensure it functions as expected.
5. Look for any other this.refs used in the file and repeat from the begining.

Example of migrated code

• PR #5753

Questions

you can ask for help messaging @guillermo.vaya or posting in the ~webapp channel in the community server

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA ticket: https://mattermost.atlassian.net/browse/MM-29412

[sowmiyamuthuraman]

I would like to work on this