title: How to fix " Cannot read property 'sendMessage' of undefined" react chat system
body: <p>I am building a chat system with react and chatkit. I have a function called sendMessage in App.js that sends whatever the user type in the sendMessage Form to display it in the MessageList Component. </p>
  
  <p>this is <strong>App.js</strong></p>
  
  <pre><code>import Chatkit from '@pusher/chatkit'
  import MessageList from './components/MessageList'
  import SendMessageForm from './components/SendMessageForm'
  import RoomList from './components/RoomList'
  import NewRoomForm from './components/NewRoomForm'
  
  import { tokenUrl, instanceLocator } from './config'
  
  class App extends React.Component {
  
      constructor() {
          super()
          this.state = {
              messages: []
          }
          this.sendMessage = this.sendMessage.bind(this)
      } 
  
      componentDidMount() {
          const chatManager = new Chatkit.ChatManager({
              instanceLocator,
              userId: 'Ismail',
              tokenProvider: new Chatkit.TokenProvider({
                  url: tokenUrl
              })
          })
  
          chatManager.connect()
          .then(currentUser =&gt; {
              this.currentUser = currentUser
              this.currentUser.subscribeToRoom({
                  roomId: 24622056,
                  hooks: {
                      onNewMessage: message =&gt; {
                          this.setState({
                              messages: [...this.state.messages, message]
                          })
                      }
                  }
              })
          })
      }
  
      sendMessage(text) {
          this.currentUser.sendMessage({
              text,
              roomId: 24622056
          })
      }
  
      render() {
          return (
              &lt;div className="app"&gt;
                  &lt;RoomList /&gt;
                  &lt;MessageList messages={this.state.messages} /&gt;
                  &lt;SendMessageForm sendMessage={this.sendMessage} /&gt;
                  &lt;NewRoomForm /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App
  </code></pre>
  
  <p>And this is <strong>sendMessageForm.js</strong> component.</p>
  
  <pre><code>import React from 'react'
  
  class SendMessageForm extends React.Component {
  
      constructor() {
          super()
          this.state = {
              message: ''
          }
          this.handleChange = this.handleChange.bind(this)
          this.handleSubmit = this.handleSubmit.bind(this)
      }
  
      handleChange(e) {
          this.setState({
              message: e.target.value
          })
      }
  
      handleSubmit(e) {
          e.preventDefault()
          this.props.sendMessage(this.state.message)
      }
  
      render() {
          return (
              &lt;form
                  onSubmit={this.handleSubmit}
                  className="send-message-form"&gt;
                  &lt;input
                      onChange={this.handleChange}
                      value={this.state.message}
                      placeholder="Type your message and hit ENTER"
                      type="text" /&gt;
              &lt;/form&gt;
          )
      }
  }
  
  export default SendMessageForm
  
  </code></pre>
  
  <p>the expected output is the message showing up in the messages box after i hit enter but I get this: </p>
  
  <pre><code>TypeError: Cannot read property 'sendMessage' of undefined
  App.sendMessage
  src/App.js:46
    43 | }
    44 | 
    45 | sendMessage(text) {
  &gt; 46 |     this.currentUser.sendMessage({
       | ^  47 |         text,
    48 |         roomId: 24622056
    49 |     })
  View compiled
  SendMessageForm.handleSubmit
  src/components/SendMessageForm.js:22
    19 | 
    20 | handleSubmit(e) {
    21 |     e.preventDefault()
  &gt; 22 |     this.props.sendMessage(this.state.message)
       | ^  23 | }
    24 | 
    25 | render() {
  </code></pre>