title: React updates the component but not the actual HTML weird behavior
body: <p>I am experiencing a very weird react behavior. There is this component which gets <code>message</code> and <code>emailSubmitedText</code>. In render method based on some condition it should render either first or the other one.</p>
  
  <p>Now at first it is <code>message</code>. I click on the submit of the form. All the functions happen. </p>
  
  <p>The component rerenders. In the console log I can see this time it should render <code>emailSubmitedText</code>. In react devtools it show the right text. </p>
  
  <p>However in the actual html and html inspector it still shows the previos text.</p>
  
  <pre><code>import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  
  import Details from './Details'
  
  class DefaultMessage extends Component {
    inputRef = null
  
    renderEmailForm = () =&gt; {
      return (
        &lt;form
          className='b2c_email-form input-field'
          onSubmit={e =&gt; {
            e.preventDefault()
            const { projectId, visitSessionId } = this.props
            this.setState({ email: this.inputRef.value })
            this.props.onSubmitEmail({
              email: this.inputRef.value,
              convertedPage: window.location.href, projectId, visitSessionId
            })
          }}
        &gt;
          &lt;div className="input-field"&gt;
            &lt;input ref={elem =&gt; this.inputRef = elem} id='email' type='email' className='validate' value={this.props.email} /&gt;
            &lt;label htmlFor='email' data-error='Invalid email address'&gt;E-mail&lt;/label&gt;
          &lt;/div&gt;
          &lt;button
            className='b2c_email-form-button waves-effect waves-light btn'
            type='submit'
            style={{
              backgroundColor: this.props.companyColor || '#63bc78'
            }}
          &gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      )
    }
  
    render = () =&gt; {
      console.log('...&gt; ', this.props.error || !this.props.contactId &amp;&amp; this.props.message || this.props.emailSubmitedText)
      return (
        &lt;div className='b2c_chat-message'&gt;
          &lt;Details
            classNames='b2c_chat-message-details__admin'
            avatar={this.props.avatar}
            name={this.props.name}
            date={this.props.date}
          /&gt;
          &lt;div className='b2c_chat-message-text b2c_chat-message-text__admin b2c_chat-message-default'&gt;
            &lt;div className='b2c_chat-message-after b2c_chat-message-after__admin' /&gt;
            {this.props.error || !this.props.contactId &amp;&amp; this.props.message || this.props.emailSubmitedText}
            {!this.props.contactId &amp;&amp; this.renderEmailForm()}
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  DefaultMessage.propTypes = {
    projectId: PropTypes.string.isRequired,
    visitSessionId: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
    date: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired,
    onSubmitEmail: PropTypes.func.isRequired
  }
  
  export default DefaultMessage
  </code></pre>
  
  <p>Here is the direct parent of the component.</p>
  
  <pre><code>import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  
  import $ from 'jquery'
  import moment from 'moment'
  import randomstring from 'randomstring'
  
  import DefaultMessage from './DefaultMessage'
  import Message from './Message'
  
  import UserTypingIndicator from '../UserTypingIndicator'
  import TypingIndicator from './TypingIndicator'
  
  class Messages extends Component {
    chatRef = null
  
    componentDidUpdate () {
      this.scrollToTheLastMessage()
    }
  
    scrollToTheLastMessage = () =&gt; {
      const $chat = $(this.chatRef)
      const scrollTop = $chat.prop('scrollHeight') - $chat.innerHeight()
      $chat.scrollTop(scrollTop)
    }
  
    renderDefaultMessage = () =&gt; (
      &lt;DefaultMessage
        contactId={this.props.contactId}
        companyColor={this.props.companyColor}
        error={this.props.error}
        date={moment().format('h:mm A')}
        name={this.props.adminName}
        avatar={this.props.adminAvatar}
        message={this.props.welcomeMessage}
        emailSubmitedText={this.props.emailSubmitedText}
        projectId={this.props.projectId}
        visitSessionId={this.props.visitSessionId}
        onSubmitEmail={this.props.onSubmitEmail}
      /&gt;
    )
  
    renderMessages = () =&gt; {
      let checkConversationDate = null
      const {messages, contactName, adminName, adminAvatar} = this.props
      const compareConversationDates = (createdAt) =&gt; {
        checkConversationDate = moment(createdAt).format("DD.MM.YYYY")
        return (
          &lt;div key={randomstring.generate()} className='conversationDayDate'&gt;
            &lt;span&gt;{checkConversationDate}&lt;/span&gt;
          &lt;/div&gt;
        )
      }
      if (!messages) return null
      return messages.map((message, index) =&gt; {
        return (
          &lt;div&gt;
            {checkConversationDate !== moment(message.createdAt.$date).format("DD.MM.YYYY") ? compareConversationDates(message.createdAt.$date)  : ''}
            {/* {index === 0 ? this.renderDefaultMessage() : ''} */}
            &lt;Message
              isAdmin={message.userId ? true : false}
              imageFile={message.imageFile}
              key={randomstring.generate()}
              companyColor={this.props.companyColor}
              contactName={contactName}
              adminName={adminName}
              avatar={adminAvatar}
              message={message.message}
              date={moment(message.createdAt.$date).format('h:mm A')}
            /&gt;
          &lt;/div&gt;
        )
      })
    }
  
    renderTypingIndicators = () =&gt; {
      const arrayToRender = [
        this.props.isAdminTyping &amp;&amp; &lt;AdminTypingIndicator /&gt;,
        this.props.isUserTyping &amp;&amp; &lt;UserTypingIndicator /&gt;
      ]
      return arrayToRender
    }
  
    render = () =&gt; &lt;div ref={elem =&gt; this.chatRef = elem} id='chat' className='chat-body' style={{
      height: 'calc(100% - 190px - 3rem)',
      overflowY: 'scroll',
      margin: '30px 10px 10px 0',
      boxSizing: 'border-box'
    }}&gt;
      {this.renderDefaultMessage()}
      {this.renderMessages()}
      {this.renderTypingIndicators()}
    &lt;/div&gt;
  }
  
  Messages.propTypes = {
    projectId: PropTypes.string.isRequired,
    visitSessionId: PropTypes.string.isRequired,
    messages: PropTypes.array.isRequired,
    adminName: PropTypes.string.isRequired,
    contactName: PropTypes.string.isRequired,
    onSubmitEmail: PropTypes.func.isRequired
  }
  
  export default Messages
  </code></pre>
  
  <p>And here is where Container with states</p>
  
  <pre><code>import React, { Component } from 'react'
  import Sound from 'react-sound'
  import ddp from '../../ddp'
  import Cookies from 'js-cookie'
  import randomstring from 'randomstring'
  
  import ChatContainer from './ChatContainer'
  import Icon from './Icon'
  
  import { connect, makeArrayCollectionFromObjectCollection, getNewMessages } from '../../functions'
  
  class View extends Component {
    defaultDocumentTitle = null
  
    state = {
      contactId: '',
      chat: null,
      show: false,
      newMessagesCount: null,
      notStatus: 'STOPPED'
    }
  
    newMessageNotification = newMessages =&gt; {
      if (newMessages.length &amp;&amp; newMessages.length &gt; this.state.newMessagesCount) {
        this.setState({ notStatus: 'PLAYING' })
        document.title = `(${newMessages.length}) ${this.defaultDocumentTitle}`
      } else if (!newMessages.length) {
        document.title = this.defaultDocumentTitle
      }
      if (this.state.newMessagesCount !== newMessages.length) {
        this.setState({ newMessagesCount: newMessages.length })
      }
    }
  
    componentWillMount () {
      this.defaultDocumentTitle = document.title
    }
  
    componentDidMount = async () =&gt; {
      this.setContactIdFromCookies()
      await connect(ddp)
    }
  
    setContactIdFromCookies = () =&gt; {
      window.Cookies = Cookies
      console.warn('setContactIdFromCookies')
      const contactId = Cookies.get('b2cContactId')
      console.log('contactId', contactId)
      if (contactId) this.setState({contactId})
    }
  
    componentDidUpdate () {
      console.warn('componentDidUpdate', this.props)
      if (this.state.contactId &amp;&amp; !this.state.chat) {
        this.getChat(this.state.contactId)
      }
      if (this.state.chat &amp;&amp; this.state.chat.length) {
        let newMessages = getNewMessages(this.state.chat)
        this.newMessageNotification(newMessages)
      }
    }
  
    componentWillReceiveProps = (nextProps) =&gt; {
      console.warn('componentWillReceiveProps', nextProps)
      if (!nextProps.contactId) return
      if (this.state.chat == null) this.getChat(nextProps.contactId)
    }
  
    getChat = async (contactId) =&gt; {
      console.log('getChat', contactId)
      await ddp.subscribe('Messages', {contactId})
      const messagesColl = ddp.getCollection('Messages')
      console.log('messagesColl', messagesColl)
      this.setState({chat: this.getMessages(messagesColl)})
      ddp.watch('Messages', (changedDoc, message) =&gt; {
        console.log('Messages collection item changed', changedDoc, message)
        const messagesColl = ddp.getCollection('Messages')
        this.setState({chat: this.getMessages(messagesColl)})
      })
    }
  
    getMessages = collection =&gt; {
      let messages = []
      if (collection) {
        messages = makeArrayCollectionFromObjectCollection(collection)
      }
      console.log('messages', messages)
      return messages
    }
  
    submitEmail = ({ email, convertedPage, projectId, visitSessionId }) =&gt; ddp.call('chat.init', { email, convertedPage, projectId, visitSessionId })
      .then(contactId =&gt; {
        Cookies.set('b2cContactId', contactId, { expires: 90 })
        this.setState({ contactId, error: '' })
      })
      .catch(error =&gt; {
        console.error('Error &gt;', error)
      })
  
    readMessages = () =&gt; ddp.call('readMessages', {contactId: this.state.contactId, userId: !null})
      .then(res =&gt; {
        console.log('res', res)
      })
      .catch(error =&gt; {
        console.error('Error', error)
      })
  
  
    submitMessage = ({message, visitSessionId, imageFile}) =&gt; ddp.call('chat.submitContactMessage', { message, visitSessionId, contactId: this.state.contactId, projectId: this.props.projectId, imageFile: imageFile || null})
    .then((res) =&gt; {
      console.log('res', res)
    })
    .catch(error =&gt; {
      console.error('Error', error)
      this.setState({error})
    })
  
    toggleChat = () =&gt; this.setState((state) =&gt; ({show: !state.show}))
  
    sendFileToServer = (base64File, resolve, reject) =&gt; {
      ddp.call('uploadToDropbox', base64File)
      .then((res) =&gt; {
        this.submitMessage({message: '', visitSessionId: this.props.visitSessionId, imageFile: res})
        console.log('res', res)
      })
      .catch(error =&gt; {
        console.error('Error', error)
      })
    }
  
    getBase64 = (file, resolve, reject) =&gt; {
      const self = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function () {
        self.sendFileToServer(reader.result, resolve, reject)
      }
      reader.onerror = function (error) {
        console.error('FileReader Error: ', error)
      }
    }
  
  
    onFileDrop = files =&gt; {
      let self = this
      files.forEach(file =&gt; {
        return new Promise((resolve, reject) =&gt; {
          self.getBase64(file, resolve, reject)
        })
      })
    }
  
    render () {
      return (
        &lt;div&gt;
          &lt;ChatContainer
            onFileDrop={this.onFileDrop}
            contactId={this.state.contactId}
            show={this.state.show}
            error={this.state.error &amp;&amp; &lt;span style={{color: 'red'}}&gt;{this.state.error}&lt;/span&gt;}
            chatSettings={this.props.chatSettings}
            projectId={this.props.projectId}
            visitSessionId={this.props.visitSessionId}
            defaultAdminUserName='default defaultAdminUserName'
            contactName='You'
            supportName='Our Support'
            messages={this.state.chat}
            onSend={this.submitMessage}
            onSubmitEmail={this.submitEmail}
            toggleChat={this.toggleChat}
            readMessages={this.readMessages}
          /&gt;
          &lt;Icon
            companyColor={this.props.chatSettings.companyColor}
            onClick={this.toggleChat}
            newMessagesCount={this.state.newMessagesCount}
          /&gt;
          &lt;Sound
            url='https://www.incredo.co/hubfs/b2c/Not%201.wav'
            playStatus={this.state.notStatus}
            playFromPosition={0}
            onFinishedPlaying={() =&gt; this.setState({ notStatus: 'STOPPED' })}
          /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default View
  </code></pre>