title: TypeError: Cannot read property 'appendChild' of null in ReactJS
body: <p>I am creating a chatApp in ReactJS but I am experiencing this error:</p>
  <blockquote>
  <p>TypeError: Cannot read property 'appendChild' of null</p>
  </blockquote>
  <p>I have called &quot;printmessage&quot; but still it is still returning null. (on line 144)
  <strong>APP.JS:</strong></p>
  <pre><code>import React from 'react'
  import './App.css';
  import firebase from 'firebase'
  
  const firebaseConfig = {
    apiKey: &quot;AIzaSyBTwRj0vzQn4v-IRvRQ7UQSPMnBNT0Gi0A&quot;,
    authDomain: &quot;whatapp-02.firebaseapp.com&quot;,
    databaseURL: &quot;https://whatapp-02-default-rtdb.firebaseio.com&quot;,
    projectId: &quot;whatapp-02&quot;,
    storageBucket: &quot;whatapp-02.appspot.com&quot;,
    messagingSenderId: &quot;1085780260212&quot;,
    appId: &quot;1:1085780260212:web:540d871a14bb7536b4e821&quot;
  };
  
  firebase.initializeApp(firebaseConfig)
  
  class App extends React.Component {
    
    constructor(props){
      super(props);
      this.state = {
        name: ' ',
        partner: ' ',
        key: ' ',
        allkey: ' ',
        message: ' ',
        prevmessage: ' ',
        username: ' ',
        partnermessage: ' ',
        chatpartner: ' ',
      };
    }
  
    login=()=&gt;{
      var key = Math.random().toString().substring(2, 8);
      this.setState({key: key,});
      firebase.database().ref('USER-'+key).set({
        key: key,
        partner: ' ',
      });
      document.getElementsByClassName(&quot;logindiv&quot;)[0].style.display = &quot;none&quot;;
      document.getElementsByClassName(&quot;chatdiv&quot;)[0].style.display = &quot;block&quot;;
      setInterval(this.update_partner, 1000)
    }
  
    get_user=()=&gt;{
      var parsedallkey = parseInt(this.state.key,10) + parseInt(this.state.partner,10);
      var input = prompt(&quot;enter user code:&quot;)
      firebase.database().ref('USER-'+this.state.key).set({
       partner: input,
      });
      firebase.database().ref('USER-'+input).set({
        partner: this.state.key,
      });
      this.setState({allkey: parsedallkey})
    }
     
    update_partner=()=&gt;{
    var parsedallkey = parseInt(this.state.key,10) + parseInt(this.state.partner,10);
    firebase.database().ref('USER-'+this.state.key).once('value', (snapshot)=&gt;{
      var partner = snapshot.val().partner
      this.setState({partner: partner})
    })
    this.setState({allkey: parsedallkey})
    setInterval(this.identify_message, 2000) 
    }
  
    handle_message=(e)=&gt;{
     this.setState({message: e.target.value});
     console.log(this.state.message)
    }
  
    send_message=()=&gt;{
      firebase.database().ref('MESSAGE'+this.state.allkey).push().set({ //Save user name and message in reference &quot;messages&quot; in firebase database
          sender: this.state.key,
          message: this.state.message
      });
    }
  
    render(){
      return (&lt;&gt;
       &lt;div className='logindiv'&gt;
       &lt;h1 style={{float: 'left'}}&gt;chatApp&lt;/h1&gt;
         &lt;a href=&quot;#&quot; role=&quot;button&quot; onClick={this.login} style={{position:'relative',top:29,float: 'right'}}&gt;Guest login&lt;/a&gt;
       &lt;div style={{position: 'relative', top:90,height:440, textAlign: 'center', backgroundImage: &quot;url(https://cdn.wallpapersafari.com/20/74/x58BEZ.jpg)&quot;}}&gt;
         &lt;h2 style={{position: 'relative',top:50,color: 'white'}}&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec dapibus sapien, quis sagittis quam. Pellentesque lacus mi, bibendum ac augue non, placerat tempus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi laoreet tellus consequat pulvinar pulvinar. Cras neque ante, varius vel feugiat nec, cursus nec sapien. Sed &lt;br&gt;&lt;/br&gt;viverra ullamcorper accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vitae pellentesque lectus. Vivamus eget urna at tellus porta sodales at quis urna. &lt;br&gt;&lt;/br&gt;Aliquam non enim non ipsum viverra gravida a convallis metus. Aenean dapibus accumsan nunc, non vestibulum nulla semper ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur commodo posuere ligula id varius. Morbi rutrum eu arcu sit amet viverra. Vestibulum hendrerit sodales eros eget imperdiet.&lt;/h2&gt;
       &lt;/div&gt;
       &lt;/div&gt;
  
       &lt;div className='chatdiv'&gt;
  &lt;div&gt;
    {/* Navbar */}
    &lt;nav className=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
      {/* Container wrapper */}
      &lt;div className=&quot;container-fluid&quot;&gt;
        {/* Navbar brand */}
        &lt;h4 className=&quot;navbar-brand&quot; &gt;Your key: {this.state.key}&lt;/h4&gt;
        {/* Toggle button */}
        {/* Collapsible wrapper */}
        &lt;div className id&gt;
          {/* Search form */}
          &lt;form className=&quot;d-flex input-group w-auto ml-auto&quot;&gt;
            &lt;input type=&quot;search&quot; className=&quot;form-control align-self-center&quot; placeholder=&quot; Enter a user code...&quot; aria-label=&quot;Search&quot; /&gt;
            &lt;button className=&quot;btn btn-outline-primary&quot; type=&quot;button&quot; data-mdb-ripple-color=&quot;dark&quot; onClick={this.get_user}&gt;
              Search
            &lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        {/* Collapsible wrapper */}
      &lt;/div&gt;
      {/* Container wrapper */}
    &lt;/nav&gt;
    {/* Navbar */}
    &lt;div className=&quot;copntainer-fluid&quot;&gt;
      &lt;div className&gt;
        &lt;div className=&quot;form-group&quot;&gt;
          &lt;label htmlFor=&quot;exampleFormControlTextarea3&quot; /&gt;
          &lt;ul id=&quot;printmessage&quot;&gt;&lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;form className=&quot;d-flex input-group w-auto ml-auto&quot;&gt;
        &lt;input type=&quot;search&quot; className=&quot;form-control align-self-center&quot; placeholder=&quot; Enter your message...&quot; aria-label=&quot;Search&quot; /&gt;
        &lt;button className=&quot;btn btn-outline-primary&quot; type=&quot;button&quot; onClick={this.send_message} data-mdb-ripple-color=&quot;dark&quot;&gt;
          Send
        &lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
       &lt;/div&gt;
    &lt;/&gt;);
    }
  
    identify_message=()=&gt;{
      firebase.database().ref('MESSAGE'+this.state.allkey).limitToLast(1).on(&quot;child_added&quot;, (snapshot)=&gt;{
        if(snapshot.val().sender + &quot;: &quot; + snapshot.val().message + ' , you said' === this.state.prevmessage || this.state.partnermessage === snapshot.val().sender + &quot;: &quot; + snapshot.val().message + ' , he said'){}else{
        if(snapshot.val().sender === this.state.key){
          var li = document.createElement(&quot;li&quot;)
          li.innerHTML = snapshot.val().sender + &quot;: &quot; + snapshot.val().message + ' , you said'; 
          console.log(snapshot.val().sender + &quot;: &quot; + snapshot.val().message + ' , you said')
          console.log(this.state.allkey)
          this.setState({prevmessage: snapshot.val().sender + &quot;: &quot; + snapshot.val().message + ' , you said'})
          document.getElementById(&quot;printmessages&quot;).appendChild(li)
        }else if(snapshot.val().sender === this.state.partner){
            var li = document.createElement(&quot;li&quot;)
            li.innerHTML = snapshot.val().sender + &quot;: &quot; + snapshot.val().message + ' , he said';
            document.getElementById(&quot;printmessages&quot;).appendChild(li)
            console.log(snapshot.val().sender + &quot;: &quot; + snapshot.val().message + ' , he said')
            this.setState({partnermessage: snapshot.val().sender + &quot;: &quot; + snapshot.val().message + ' , he said'})
        }
      }
     });
    }
  
  
  }
  
  export default App;
  </code></pre>
  <p>I am using React-CLI. I have also integrated bootstrap using CDN in public/index.html.</p>