Why does asynchronous function cause PropTypes to be null

I have a simple react app with Firebase with this structure

Project
 |    
 +-- src
 |  |  
 |  +-- component
             |
             +---SampleAppFolder
                      |
                      + index.js
                      + MySampleApp.js
 ...

in the index.js I have a create a React component SampleAppPage and I try to pass the prop from the SampleAppPage to the MySampleApp, like this,

SampleAppPage extends React.Componet {

  render() {
    return (
    <MySampleApp varA={item.itemVarA} varB={item.itemData.itemVarB} varC={item.itemData.itemVarC || 0}/>
   )
  }
}

import React from 'react';
import PropTypes from 'prop-types';

class MySampleApp extends React.Component {

    static propTypes = {
        varA: PropTypes.number.isRequired,
        varB: PropTypes.string.isRequired,
        varC: PropTypes.string.isRequired,
    };

    constructor(props) {
        super(props);

        this.state = INITIAL_STATE;
        this.varA = db.getByReference(A_NODE);
        this.varB = db.getByReference(B_NODE);
        this.varC = db.getByReference(C_NODE);
    };

In the debug mode, props were passed fine but in the render function for MySampleApp,


<Button icon='like' floated='right' onClick={this.foo} loading={loading}/>

I made a async call for this.foo function variable like this

foo = async () => {
      this.setState({ loading: true });

      try {
         console.log(this.props.varA); 
         console.log(this.props.varB);
         await db.pushToReference(); //asynchronous call to push data to Firebase Realtime database reference node

         this.setState({
             loading: false
         });
      }
      catch
      {


      }

}

Why varA and varB PropTypes were passed successfully in the MySampleApp constructor but when I called the async function, why varA prints the value but var B print null
?

Is it because the async operation in the function variable?

I’m quite new in the JavaScript space so please spare me some insights on the issue?

Source: Ask Javascript Questions

LEAVE A COMMENT