How to properly update users count using Reactjs - reactjs

Question

I have searched StackOverflow but most of the solutions found could not solve my issue at the moment.
The Code below displays users records from the array via reactjs.
Now I have the task to display users count on content display.
In Jquery/Javascript, I can achieve it using the function below
function updateCount(userId){
alert('userId: ' +userId);
var count = (userCount[userId] == undefined) ? 1 : userCount[userId] + 1;
userCount[userId] = count;
alert('Counter: ' +userCount[userId]);
console.log('Counter: ' +userCount[userId]);
$('#' + userId + ' label.userCount').html(count);
$('#' + userId + ' label.userCount').show();
}
Now in Reactjs, I created the following function below which I added to the main code but it throws error
Reactjs functions
updateCount = (userId) => {
alert('userId: ' +userId);
var count = (userCount[userId] == undefined) ? 1 : userCount[userId] + 1;
userCount[userId] = count;
alert('Counter: ' +userCount[userId]);
console.log('Counter: ' +userCount[userId]);
this.setState(state => ({
data: userCount[userId]
}));
}
Here is the error it shows
bundle.js:109480 Uncaught ReferenceError: userCount is not defined
at App._this.updateCount
Below is the entire code so far
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
userCount: []
};
}
componentDidMount() {
var userId = "100";
//var userCount = [];
//this.userCount = [];
this.setState({
data: [
{
id: "100",
name: "Luke"
},
{
id: "200",
name: "Henry"
},
{
id: "300",
name: "Mark"
}
]
});
this.updateCount = this.updateCount.bind(this);
}
updateCount = userId => {
alert("userId: " + userId);
var count = userCount[userId] == undefined ? 1 : userCount[userId] + 1;
userCount[userId] = count;
alert("Counter: " + userCount[userId]);
console.log("Counter: " + userCount[userId]);
this.setState(state => ({
data: userCount[userId]
}));
};
render() {
return (
<span>
<label>
<ul>
{this.state.data.map((person, i) => {
if (person.id == 100) {
this.updateCount(person.id);
return (
<div key={i}>
<div>
{" "}
{person.id}: {person.name}{" "}
</div>{" "}
</div>
);
} else {
this.updateCount(person.id);
}
})}
</ul>{" "}
</label>{" "}
</span>
);
}
}
Updated Section
It shows error of unexpected token with the code below
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
userCount: [],
};
}
componentDidMount() {
// componentWillMount(){
var userId= '100';
//var userCount = [];
//this.userCount = [];
this.setState({
data: [
{ id: "100", name: "Luke"},
{ id: "200", name: "Henry"},
{ id: "300", name: "Mark" }
]
});
this.updateCount = this.updateCount.bind(this);
}
updateCount = (userId) => {
//alert('userId: ' +userId);
const {userCount} = this.state;
var count = userCount[userId] == undefined ? 1 : userCount[userId] + 1;
//var count = (userCount[userId] == undefined) ? 1 : userCount[userId] + 1;
userCount[userId] = count;
alert('Counter kk000000me: ' +userCount[userId]);
console.log('Counter: ' +userCount[userId]);
this.setState({data11: count});
}
const result = this.state.data.map((person, i) => {
if (person.id == 100) {
this.updateCount(person.id); //Every time this is called, it triggers setState
return (
<div key={i}>
<div>
{" "}
{person.id}: {person.name}{" "}
</div>{" "}
</div>
);
} else {
this.updateCount(person.id);
}
});
render() {
return (
<span>
<label>
<ul> {result} </ul>
</label>
</span>
);
}

Answer 1

To access your state variables, you need to do it like
this.state.userCount
In your example you're trying to access your userCount without referring to it in the state.
var count = userCount[userId] == undefined ? 1 : userCount[userId] + 1;
You should instead do:
const {userCount} = this.state;
var count = userCount[userId] == undefined ? 1 : userCount[userId] + 1;
Edit
Warning: Cannot update during an existing state transition (such as within render or another component's constructor)
To fix this issue, you have to ensure that your component is not triggering setState inside of itself. In your snippet, when you map over your data, it calls updateCount which then calls this.setState() which will trigger a re-render.
One solution would be to assign the result of your map to a const, and the render it.
const result = this.state.data.map((person, i) => {
if (person.id == 100) {
this.updateCount(person.id); //Every time this is called, it triggers setState
return (
<div key={i}>
<div>
{" "}
{person.id}: {person.name}{" "}
</div>{" "}
</div>
);
} else {
this.updateCount(person.id);
}
});
...
render() {
return (
<span>
<label>
<ul> {result} </ul>
</label>
</span>
);
}