diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js
index 013d10051973..4267099a56ea 100644
--- a/src/components/TextInput/TextInputLabel/index.js
+++ b/src/components/TextInput/TextInputLabel/index.js
@@ -1,32 +1,34 @@
-import React, {PureComponent} from 'react';
+import React, {useRef, useEffect} from 'react';
import {Animated} from 'react-native';
import styles from '../../../styles/styles';
import {propTypes, defaultProps} from './TextInputLabelPropTypes';
import CONST from '../../../CONST';
-class TextInputLabel extends PureComponent {
- componentDidMount() {
- if (!this.props.for) {
+function TextInputLabel({for: inputId, label, labelTranslateY, labelScale}) {
+ const labelRef = useRef(null);
+
+ useEffect(() => {
+ if (!inputId || !labelRef.current) {
return;
}
- this.label.setAttribute('for', this.props.for);
- }
+ labelRef.current.setAttribute('for', inputId);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
- render() {
- return (
- (this.label = el)}
- pointerEvents="none"
- accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
- style={[styles.textInputLabel, styles.textInputLabelDesktop, styles.textInputLabelTransformation(this.props.labelTranslateY, 0, this.props.labelScale)]}
- >
- {this.props.label}
-
- );
- }
+ return (
+
+ {label}
+
+ );
}
+TextInputLabel.displayName = 'TextInputLabel';
TextInputLabel.propTypes = propTypes;
TextInputLabel.defaultProps = defaultProps;
-export default TextInputLabel;
+export default React.memo(TextInputLabel);