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);