How to properly get message count on form submission using reactjs - reactjs

Question

How to properly get message count on form submission using reactjs.
For hours now am on this trying to find the possible solution.
The Application below submits and displays message info and everything works fine.
Now I have task of implementing a message counter each time message is submitted by a user.
This is what I have done to implement counter for the user
var senderId ='Nancy101';
const {textCount} = this.state;
var count = textCount[senderId] == undefined ? 1 : textCount[senderId] + 1;
textCount[senderId] = count;
alert('am counting: ' +count);
Here is my issue after adding the textcount method above
Each time I submit the form am having error
Uncaught TypeError: Cannot read property 'Nancy101' of undefined
at bundle.js:109988
here is the line of code that causes the issue
var count = textCount[senderId] == undefined ? 1 : textCount[senderId] + 1;
Here is the code
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
message: '',
};
this.sendMessage = this.sendMessage.bind(this);
}
componentDidMount() {
var textCount = [];
}
sendMessage = (message_text) => {
alert(message_text);
this.setState({
data: [
{ id: "1", name: "Nancy101", message: "Hello from User1"}
]
});
}
render() {
return (
<div>
<input type="text" placeholder="Message" value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/>
<br/>
<span onClick={ () => this.sendMessage(this.state.message)}>Submit</span>
{this.state.data.map((message, i) => {
if (message.message !=='' && message.name !=='') {
//var senderId=message.name;
var senderId ='Nancy101';
const {textCount} = this.state;
var count = textCount[senderId] == undefined ? 1 : textCount[senderId] + 1;
textCount[senderId] = count;
alert('am counting: ' +count);
return (
<div key={i}>
<div>
{message.name}: {message.message}
</div>
</div>
)
} else {
//alert nothing.
}
})}
</div>
);
}
}

Answer 1

The problem here is happening because you trying to get textCountfrom state. However, your state doesn't have a key named textCount.
This is what you are doing.
const { textCount } = this.state;
It's mean this.
const textCount = this.state.textCount;
Which is return you an undefined because your state object doesn't have that key.
Then you are trying to get the value of the key named Nancy101 from undefined object that's why you get that error.
You can fix it by add textCount in your initial state inside constructor like this.
constructor(props) {
super(props);
this.state = {
data: [],
message: '',
textCount: {},
};
Instead of get undefined here const {textCount} = this.state;, now you got an object. {}
Also, you can update this line.
`var count = textCount[senderId] == undefined ? 1 : textCount[senderId] + 1;`
To this.
`let count = !textCount[senderId] ? 1 : textCount[senderId] + 1;`
with this !textCount[senderId] it gonna check your data that is it equal 0, undefined or ''.