How to properly rewrite ajax functions to Reactjs equivalents - ajax

Question

With Ajax/jquery Function code below I can get a particular user message count and everything is working fine.
var userId='Nancy';
function handleUpdateCount(userId) {
var count = (mCount[userId] == undefined) ? 1 : mCount[userId] + 1;
mCount[userId] = count;
$('#' + userId + ' label.mCount').html(count);
$('#' + userId + ' label.mCount').show();
}
below is how I successfully display ajax result.
<label class="mCount"></label>
Now Am re-writting the above ajax/jquery code to work with reactjs. So I have implemented the function below
which works fine in React as I can alert counter result in the setState() method.
handleUpdateCount = (userId) => {
const {mCount} = this.state;
var count = mCount[userId] == undefined ? 1 : mCount[userId] + 1;
mCount[userId] = count;
this.setState({mCount: count});
// alert the result is working
alert(this.state.mCount);
}
In the render method I knew I can get the result as per
{this.state.mcount && <label>{this.state.mcount}</label> }
Here is my issue:
How do I convert this two remaining ajax line of codes to reactjs equivalents.
$('#' + userId + ' label.mCount').html(count);
$('#' + userId + ' label.mCount').show();
Do I need to do something like code below in reactjs or what? since userId is involved that two lines of code above
if(userId){
this.setState({mCount: count});
// alert the result is working
alert(this.state.mCount);
}
Updated Section
The userId for either ajax or reactjs is coming from button click event
In Reactjs, you will have
<button
onClick={() => this.handleUpdateCount(user.userId)}
>{user.userId}</button>
In Ajax, It is
usersList += '<li id="' + user.id + '" onclick="handleUpdateCount(this, \'' + user.id + '\')">' + user.name + '101</li>';
Here is the css line of code called
.mCount { color: #FFF; float: right; border-radius: 12px; border: 1px solid #2E8E12; background: #34BB0C; padding: 2px 6px; }
Below is full code of how am writting the ajax function to Reactjs equivalents
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
mCount: {},
};
this.handleUpdateCount = this.handleUpdateCount.bind(this);
}
componentDidMount() {
this.setState({
data: [
{ userId: "nancy101", name: "Nancy Mooree", info: "Hello from Nancy"},
{ userId: "joy106", name: "Joy Mooree", info: "Hello from Joy"}
]
});
}
handleUpdateCount = (userId) => {
alert(userId);
const {mCount} = this.state;
var count = mCount[userId] == undefined ? 1 : mCount[userId] + 1;
mCount[userId] = count;
alert(count);
this.setState({mssCount: count});
// alert the result is working
// alert(this.state.mssCount);
}
render() {
return (
<div>
{this.state.mssCount}
{this.state.data.map((user, i) => {
if (user.userId !=='' && user.name !=='') {
return (
<div key={i}>
<div>
{user.userId}: {user.name}
<br /><button
onClick={() => this.handleUpdateCount(user.userId)}
>{user.userId}</button>
</div>
</div>
)
} else {
}
})}
</div>
);
}

Answer 1

I foud out that this is the best way to create the function to achieve my goal. since am working with nodejs and socket.Io. I have found a way to emit users count along with the userId. The function below is still working perfect for me. Thanks
handleUpdateCount = (userId) => {
alert(userId);
const {mCount} = this.state;
var count = mCount[userId] == undefined ? 1 : mCount[userId] + 1;
mCount[userId] = count;
this.setState({mssCount: count});
}