0

I am trying this tutorial for the react chat and keep getting the error

TypeError: n.props.handleNewUserMessage is not a function

I tried to resolve it using the following resources:

This is my code:

import React, { Component } from 'react';
import { Widget, addResponseMessage } from 'react-chat-widget';
import 'react-chat-widget/lib/styles.css';

class App extends Component {
  componentDidMount() {
    addResponseMessage("How can I help you?");
  }

  handleNewUserMessage = (newMessage) => {
    console.log(`New message incomig! ${newMessage}`);
    // Now send the message throught the backend API
    addResponseMessage('response');
  }

  render() {
    return (
      <div className="App">
        <Widget />
      </div>
    );
  }
}


export default App;

Where have I gone wrong?

2
  • handleNewUserMessage where do you use this function? You showed it's declaration, but I don't see where you use it, and the error is about this method. Looks like you should've done this <Widget handleNewUserMessage={this.handleNewUserMessage} /> Commented May 23, 2018 at 8:42
  • Where are u calling handleNewUserMessage Commented May 23, 2018 at 8:42

1 Answer 1

3

Just as the error mentions, you forgot to actually add the method to the props:

 <Widget
    handleNewUserMessage={this.handleNewUserMessage}
 />
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.