title: class level variable updated inside a componentWillMount function not accessible in render method after a function call
body: <p>I have created following react class in my code base and trying to use the variable <strong>includeDocReqSig</strong> in the render method. </p>
  
  <p>Refer to following lines of code in the code below -</p>
  
  <p><strong>console.log(this.includeDocReqSig); //This print the objects pretty fine in the logs but not get assigned in render function</strong></p>
  
  <p>It does not work with following code -</p>
  
  <pre><code>export class NwhERequestForm extends React.Component&lt;INwhERequestFormProps, {}&gt; {
    // Dropdown Variables
    private includeDocReqSig: IControlDynamicProp = {}; // Dropdown value for Does this include documents that requires signature or legal review?
  
    private eRequestService: ERequestService;
    private appSettings: AppSettings;
    private serviceCalls: NwhERequestFormRest;
  
    //
  
    public componentWillMount(): Promise&lt;void&gt; {
  
  
      this.eRequestService = new ERequestService(
        this.props.context.pageContext.web.absoluteUrl,
        this.props.context.spHttpClient
      );
      this.appSettings = new AppSettings();
      this.serviceCalls = new NwhERequestFormRest(this.eRequestService, this.appSettings);
  
      this.serviceCalls._getFieldChoice("Signature_x0020_Required", true).then(
        (val: IControlDynamicProp) =&gt; {
          this.includeDocReqSig = { options: val.options, disabled: val.disabled };
         console.log(this.includeDocReqSig); //This print the objects pretty fine in the logs but not get assigned in render function
        });
      return Promise.resolve();
    }
  
    public render(): React.ReactElement&lt;INwhERequestFormProps&gt; {
      return (
        &lt;div className={styles.nwhERequestForm} &gt;
          &lt;div className={styles.container}&gt;
            &lt;div className={styles.title}&gt; {this.props.description} &lt;/div&gt;
            &lt;div className={styles.subtitle}&gt; If you need assistance, please click here &lt;/div&gt;
            &lt;form&gt;
              &lt;div className={styles.mainformdiv}&gt;
                &lt;fieldset className={styles.fieldset}&gt;
                  &lt;legend className={styles.legend}&gt;Basic Information&lt;/legend&gt;
                  &lt;div className={styles.row}&gt;
                    &lt;DropdownControl
                      staticProp={{ labelTitle: 'Does this include a Vendor document that requires signature or requires legal review?', required: true }}
                      dynamicProp={this.includeDocReqSig} /&gt;
                    &lt;DropdownControl
                      staticProp={{ labelTitle: 'Is this related to an OCIO Project?', required: true }}
                      dynamicProp={{ options: signatureRequiredLegal }} /&gt;
                  &lt;/div&gt;               
                &lt;/fieldset&gt;            
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The function _getFieldChoice is defined in another ts file:</p>
  
  <pre><code> public _getFieldChoice = async (columnName: string, isDisabled: boolean, ) =&gt; {
          let controlProp: IControlDynamicProp = {};
          let dropdownValue: IDropdownOption[] = [];
          const fieldChoices: IDropdownValues[] = await this.eRequestService.getFieldDDValue(this.appSettings.eRequestListName, columnName);
          fieldChoices[0].Choices.forEach(element =&gt; {
              dropdownValue.push({ key: element, text: element });
          });
          controlProp = { options: dropdownValue, disabled: isDisabled };        
          return controlProp;
      }
  </code></pre>
  
  <p>The dropdown does not get any values. What could be the reason?</p>
  
  <p>When I try to do the assignment outside the function, it works fine. So there is something happening with the scope, maybe??</p>
  
  <pre><code>export class NwhERequestForm extends React.Component&lt;INwhERequestFormProps, {}&gt; {
    // Dropdown Variables
    private includeDocReqSig: IControlDynamicProp = {}; // Dropdown value for Does this include documents that requires signature or legal review?
  
    private eRequestService: ERequestService;
    private appSettings: AppSettings;
    private serviceCalls: NwhERequestFormRest;
  
    //
  
    const fundedBy: IDropdownOption[] = [
      { key: 'ocio', text: 'OCIO' },
      { key: 'nonocio', text: 'Non-OCIO' },
      { key: 'split', text: 'Split' },
    ];
  
    public componentWillMount(): Promise&lt;void&gt; {
  
  
      this.eRequestService = new ERequestService(
        this.props.context.pageContext.web.absoluteUrl,
        this.props.context.spHttpClient
      );
      this.appSettings = new AppSettings();
      this.serviceCalls = new NwhERequestFormRest(this.eRequestService, this.appSettings);
  
      this.includeDocReqSig = { options: fundedBy, disabled: false };
  
      return Promise.resolve();
    }
  
    public render(): React.ReactElement&lt;INwhERequestFormProps&gt; {
      return (
        &lt;div className={styles.nwhERequestForm} &gt;
          &lt;div className={styles.container}&gt;
            &lt;div className={styles.title}&gt; {this.props.description} &lt;/div&gt;
            &lt;div className={styles.subtitle}&gt; If you need assistance, please click here &lt;/div&gt;
            &lt;form&gt;
              &lt;div className={styles.mainformdiv}&gt;
                &lt;fieldset className={styles.fieldset}&gt;
                  &lt;legend className={styles.legend}&gt;Basic Information&lt;/legend&gt;
                  &lt;div className={styles.row}&gt;
                    &lt;DropdownControl
                      staticProp={{ labelTitle: 'Does this include a Vendor document that requires signature or requires legal review?', required: true }}
                      dynamicProp={**this.includeDocReqSig**} /&gt;
                    &lt;DropdownControl
                      staticProp={{ labelTitle: 'Is this related to an OCIO Project?', required: true }}
                      dynamicProp={{ options: signatureRequiredLegal }} /&gt;
                  &lt;/div&gt;               
                &lt;/fieldset&gt;            
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>