fix: #5781 (#5824)

Author: shivam-51

src/shared/components/Settings/Profile/BasicInfo/index.jsx

@@ -41,6 +41,7 @@ export default class BasicInfo extends ConsentComponent {
 
     const { userTraits } = props;
     this.state = {
+      componentMounted: false,
       inputChanged: false,
       formInvalid: false,
       basicInfoTrait: this.loadBasicInfoTraits(userTraits),
@@ -81,6 +82,9 @@ export default class BasicInfo extends ConsentComponent {
     const { basicInfoTrait } = this.state;
     const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
     this.processBasicInfo(basicInfo);
+    this.setState({
+      componentMounted: true,
+    });
   }
 
   componentWillReceiveProps(nextProps) {
@@ -461,6 +465,7 @@ export default class BasicInfo extends ConsentComponent {
     const {
       newBasicInfo,
       inputChanged,
+      componentMounted,
     } = this.state;
 
     const canModifyTrait = !this.props.traitRequestCount;
@@ -501,7 +506,7 @@ export default class BasicInfo extends ConsentComponent {
               <div styleName="field col-2">
                 <span styleName="text-required">* Required</span>
                 <input disabled={!canModifyTrait} id="firstName" name="firstName" type="text" placeholder="First Name" onChange={this.onUpdateInput} value={newBasicInfo.firstName} maxLength="64" required />
-                <ErrorMessage invalid={_.isEmpty(newBasicInfo.firstName) && inputChanged} message="First Name cannot be empty" />
+                <ErrorMessage invalid={_.isEmpty(newBasicInfo.firstName) && componentMounted} message="First Name cannot be empty" />
               </div>
             </div>
             <div styleName="row">
@@ -514,7 +519,7 @@ export default class BasicInfo extends ConsentComponent {
               <div styleName="field col-2">
                 <span styleName="text-required">* Required</span>
                 <input disabled={!canModifyTrait} id="lastName" name="lastName" type="text" placeholder="Last Name" onChange={this.onUpdateInput} value={newBasicInfo.lastName} maxLength="64" required />
-                <ErrorMessage invalid={_.isEmpty(newBasicInfo.lastName) && inputChanged} message="Last Name cannot be empty" />
+                <ErrorMessage invalid={_.isEmpty(newBasicInfo.lastName) && componentMounted} message="Last Name cannot be empty" />
               </div>
             </div>
             <div styleName="row">