title: How to Declare global variables in a function in ReactJS?
body: <p>I want to declare a global variable inside of a function and then use it outside the function. I have tried putting the JSX inside of the function so I can easily access it but that doesn't work because the renderer returns null.</p>
  <p><strong>APP.JS:</strong></p>
  <pre><code>class App extends React.Component {
    render() {
      firebase
        .database()
        .ref()
        .limitToLast(1)
        .on('child_added', function (childSnapshot) {
          var snap = childSnapshot.val();
          var category = snap.category;
          var condition = snap.condition;
          var postname = snap.postname;
          var postprice = snap.postprice;
          var username = snap.username;
          var usernumber = snap.usernumber;
          var imageURL = snap.imageURL;
          var postdescription = snap.postdescription;
          var whatsapplink = 'https://wa.me/' + usernumber + '?text=';
        });
      return (
        &lt;&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div style={{float: 'left'}}&gt;
            &lt;Ads
              imageURL={imageURL}
              name={postname}
              price={postprice}
              category={category}
              condition={condition}
              description={postdescription}
              username={username}
              usernumber={usernumber}
              whatsapplink={whatsapplink}
            /&gt;
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>
  <p>Should I write a function to get data from firebase in the render?</p>
  <p><strong>ADS.JS:</strong></p>
  <pre><code>import React from 'react';
  import '../App.css';
  
  class ads extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;img src={this.props.image} alt=&quot;image&quot;&gt;&lt;/img&gt;
          &lt;h2&gt;{this.props.name}&lt;/h2&gt;
          &lt;h2&gt;{this.props.price}&lt;/h2&gt;
          &lt;h2&gt;{this.props.category}&lt;/h2&gt;
          &lt;h2&gt;{this.props.condition}&lt;/h2&gt;
          &lt;h2&gt;{this.props.description}&lt;/h2&gt;
          &lt;h2&gt;{this.props.username}&lt;/h2&gt;
          &lt;a href={this.props.whatsapplink}&gt;
            &lt;button&gt;Chat with Seller&lt;/button&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ads;
  </code></pre>