React Chatbox, how to get the string displayed? - reactjs

Question

I am a newbie, and am trying to build a simple restaurant recommendation web app using AWS and React. So, I am using this chat window(https://www.npmjs.com/package/react-chat-window). Basically, when the user types something, the chatbot gets triggered and asks questions like "what kind of food do you want?" So far, I am able to pass the user's input and get the response back from the AWS. I can log the response to the console and verify it. But I have trouble getting the response displayed in the chatbox.
Here is the snippet of the code
class chatBox extends Component {
constructor() {
super();
this.state = {
messageList: chatHistory,
newMessagesCount: 0,
isOpen: false
};
}
// message is the user's input
_onMessageWasSent(message) {
var body = {
messages: message.data['text']
}
// every time the user types something, this function passes the user's input to AWS
apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
.then(function (result) { // result contains the response to the user's input
var text = result.data.body
console.log(text) // logs the response to the user's input
console.log(text.length)
}).catch(function (result) {
});
this.setState({ //this displays what the user types
messageList: [...this.state.messageList, message]
})
}
// This is a function that displays the input of the other side
// I can manually test it and see that whatever I pass to this function gets displayed as
// the other person's speech, not the user.
_sendMessage(text) {
console.log("sendMessage")
if (text.length > 0) {
this.setState({
messageList: [...this.state.messageList, {
author: 'them',
type: 'text',
data: { text }
}],
newMessagesCount: this.state.newMessagesCount + 1
})
}
}
As can be seen, I am logging the response to the console. Now, I want to get the response displayed so I tried inside the constructor
this._onMessageWasSent = this._sendMessage.bind(this)
and calling the function inside _onMessageSent
apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
.then(function (result) { // result contains the response to the user's input
var text = result.data.body
console.log(text) // logs the response to the user's input
console.log(text.length)
this._sendMessage(text) // Calling the function
}).catch(function (result) {
});
this.setState({ //this displays what the user types
messageList: [...this.state.messageList, message]
})
}
I can see that the _sendMessage function gets triggered, because I have a console.log. But now the chatbox displays neither the user and the chatbot. If I don't bind this._onMessageWasSent = this._sendMessage.bind(this), at least I get the user displayed.
What could be the problem??
This is my render()
render() {
return (<div>
<Launcher
agentProfile={{
teamName: 'Foodophile',
imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
}}
onMessageWasSent={this._onMessageWasSent.bind(this)}
messageList={this.state.messageList}
onFilesSelected={this._onFilesSelected.bind(this)}
newMessagesCount={this.state.newMessagesCount}
handleClick={this._handleClick.bind(this)}
isOpen={this.state.isOpen}
showEmoji
/>
</div>)
}
UPDATE
class chatBox extends Component {
constructor(props) {
super(props);
this.state = {
messageList: chatHistory,
newMessagesCount: 0,
isOpen: false
};
this._onMessageWasSent = this._onMessageWasSent.bind(this);
this._onFilesSelected = this._onFilesSelected.bind(this);
this._handleClick = this._handleClick.bind(this);
this._sendMessage = this._sendMessage.bind(this);
}
_onMessageWasSent(message) {
var body = {
messages: message.data['text']
}
apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
.then(function (result) {
var text = result.data.body
console.log(text)
console.log(text.length)
this._sendMessage(text)
}).catch(function (result) {
});
this.setState({
messageList: [...this.state.messageList, message]
})
}
_sendMessage(text) {
console.log("sendMessage")
if (text.length > 0) {
this.setState({
messageList: [...this.state.messageList, {
author: 'them',
type: 'text',
data: { text }
}],
newMessagesCount: this.state.newMessagesCount + 1
})
}
}
render() {
return (<div>
<Launcher
agentProfile={{
teamName: 'Foodophile',
imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
}}
onMessageWasSent={this._onMessageWasSent}
messageList={this.state.messageList}
onFilesSelected={this._onFilesSelected}
newMessagesCount={this.state.newMessagesCount}
handleClick={this._handleClick}
isOpen={this.state.isOpen}
showEmoji
/>
</div>)
}

Answer 1

You have to bind your class methods in class components in order to call them with this. But you have to do this, e.g. in the constructor BUT not in your render function!
Check out this very nice explanation on why and how to bind your functions.
constructor( props ){
super( props );
this._onMessageWasSent = this._onMessageWasSent.bind(this);
this._onFilesSelected = this._onFilesSelected.bind(this);
this._handleClick = this._handleClick.bind(this);
this._sendMessage = this._sendMessage.bind(this);
}
In your render function, just pass the functions like follows:
render() {
return (<div>
<Launcher
agentProfile={{
teamName: 'Foodophile',
imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
}}
onMessageWasSent={this._onMessageWasSent}
messageList={this.state.messageList}
onFilesSelected={this._onFilesSelected}
newMessagesCount={this.state.newMessagesCount}
handleClick={this._handleClick}
isOpen={this.state.isOpen}
showEmoji
/>
</div>)
}
Also, there is one more issue. This binding is a tricky thing in JavaScript and function vs ()=>{} arrow functions do treat this differently. In your case, just use an arrow function instead.
apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
.then((result) => {
var text = result.data.body
console.log(text)
console.log(text.length)
this._sendMessage(text)
}).catch(function (result) {
});
This will make sure that this inside your then-callback function is still the this that you expect it to be. This is why, if you would refactor all your functions (_onMessageWasSent, _onMessageWasSent, _onFilesSelected, handleClick, _sendMessage ) to arrow functions, there is no need anymore to bind them to this in the constructor.
See this for example:
_onMessageWasSent = (message) => {
// your function body
}
You could already get rid of the line this._onMessageWasSent = this._onMessageWasSent.bind(this);.
Read more about this binding in functions at w3school.