Showing data by React - reactjs

Question

I'm going to to click in div and show a text in another div in multiple items.
I have got series of data that contains some objects in one array(json file) and it will be shown by react.The code will be done up tohandelrule = ((e,element,i) =>{....}) . There is an onClick function ({e => this.handelrule(e,element,i)}) for each item.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
OtherRooms: {},
divVisibles: {},
loadingVisible: {},
resultRule: {},
};
}
render() {
const { data } = this.state;
const renderHotel = data.map((item, i) => {
return <div class="item">
<div class="moreInfo" onClick={(e) => this.showDiv(e, item, i)}><span>show more data</span></div>
<div key={i} className={`${!this.state.loadingVisible[i] ? "unvisible" : "visible"}`}>
<div id="ballsWaveG">
</div>
</div>
<div id="box-info" key={i} className={` ${!this.state.divVisibles[i] ? "unvisible" : "visible"}`}>
<div class="table">
{this.state.OtherRooms[i]}
</div>
</div>
</div>
});
return (
<div>
{renderHotel}
</div>
);
}
showDiv = (e, element, i) => {
this.showLoading(e, element, i);
setTimeout(() => {
fetch('/json.bc', {
method: 'POST'
})
.then(response => response.text())
.then(text => {
var Maindata = JSON.parse(text.replace(/\'/g, '"'))
this.setState(prevState => ({
Details: {
...prevState.Details,
[i]: this.renderDetails(Maindata, i),
},
divVisibles: { ...prevState.divVisibles, [i]: !prevState.divVisibles[i] },
loadingVisible: { ...prevState.loadingVisible, [i]: "" }
}))
}).catch(error => console.error(error))
}, 1000);
}
renderDetails(element, i) {
var indents = [];
indents.push(<div>
<span>{this.renderRule(element, i)}</span>
<div key={i} className={`${!this.state.loadingVisible[i] ? "unvisible" : "visible"}`}>
<div id="ballsWaveG">
</div>
</div>
<div key={i}>{this.state.resultRule[i]}</div>
</div>
)
return (
indents
)
}
showLoading = (e, elem, val) => {
this.setState(prevState => ({
loadingVisible: { ...prevState.loadingVisible, [val]: !prevState.loadingVisible[val] }
}))
};
renderRule(element, i) {
return <span class="txtRul" onClick={e => this.handelruleRoom(e, element, i)}>Show Rule</span>
}
handelruleRoom = (e, element, i) => {
var mainprovider = element.id.provider
if (mainprovider == undefined) {
return ''
} else {
this.showLoading(e, element, i);
/////the loading whould not be shown //////
setTimeout(() => {
var return_rule = function () { ////This part will be done but the result will not be shown in class="resultRule" ///////
var tmp = null;
$.ajax({
'async': false,
'type': "POST",
'global': false,
'dataType': 'html',
'url': "rule.bc",
'data': { 'mainprovider': JSON.stringify(mainprovider), },
'success': (response) => {
tmp = response;
}
});
return tmp;
}();
return this.setState(prevState => ({
resultRule: { ...prevState.resultRule, [i]: return_rule }, ///In this part return_rule does not set in resultRule ////
loadingVisible: { ...prevState.loadingVisible, [i]: "" }
}))
}, 1000);
}
}
}
ReactDOM.render(<App />, document.getElementById('Result'));
Actually there is a problem with this part this.setState( prevState => ({....})

Answer 1

There are quite a few issues with your code. I'm going to do my best to point them out and show alternatives, not merely to be critical of you, but to help you learn!
You're using quite a few state values. Think about the problem you're trying to solve, and determine the minimum possible states you need to accomplish that. For example, some of the conditional rendering your currently handling in state, can be offloaded to the render method itself using a ternary operator to render a loading component if a state value is undefined
render() {
<div>
{
!this.state.value
? <Loading />
: this.state.value
}
</div>
}
You're using class="name" in some elements. Because in Javascript, class is a keyword, when setting class names on JSX elements, use the className="name" property instead.
You're nesting your fetch calls inside of setTimeouts. This is not a very reliable method of ensuring the fetch returns a value, as network calls should be treated as taking an arbitrary amount of time. If it takes more than 1 second to fetch those files (for whatever reason) then your whole app will break. You have a few alternatives: You can add a series of callbacks, chain together .then()s, or use the new async/await ES6 feature. I'm going to give you an example of how you could utilize async/await for much cleaner and more reliable code:
showDiv = async (event, element, index) => {
this.showLoading(event, element, index);
let response = await fetch("/json.bc", { method: "POST" });
await response.text();
let data = JSON.parse(text.replace(/\'/g, '\"'));
this.setState(prevState => ({
Details: {
...prevState.Details,
[index]: this.renderDetails(data, index)
},
divVisible: {
...prevState.divVisibles,
[index]: !prevState.divVisibles[index]
},
loadingVisible: {
...prevState.loadingVisible,
[index]: ""
}
}));
};
Since this showDiv method itself is asynchronous, when you call it in your top-level code, you will need to chain a .then() and add additional code after it to ensure the new state has taken effect going forward
render() {
// Note that you cannot use await in this top-level code
showDiv.then(() => {
// The rest of your code that relies on the state set in showDiv
}).catch(err => console.error(err));
}
You may save yourself headache of dealing with asyncronous operations by simply importing the files containing your data directly into your app. The only reason you would need to use fetch() as you are, is if you were grabbing your data from a separate backend (like if you had a separate server for your database and REST API). Otherwise, you can pull those files into the client-side bundle with everything else:
// Use whatever the relative path is to these files
import data from "./json.bc";
import rules from "./rules.bc";
The power of React lies in its component based model. I see that your using a lot of helper functions within the same class to render different aspects of your interface. It may work for now, but it looks messy, and is confusing to debug and maintain. Instead, try extracting some of that functionality into new component classes, and then importing them into your App component to render. There will be a learning curve to figure out passing props, and changing state of a parent from a child, but you will gain the benefits of using React as it was intended. Most notably, you can avoid having to store arrays of data for every single div you're rendering. By encapsulating the functionality into a component, each component can manage it's own state and properties.
In your render() method, you placed a semicolon after a div near the end of your renderHotel function. Any JavaScript you want to place within a JSX block, must be put inside curly braces { }, and semicolons are not required to terminate JSX elements. It may have been a typo, but just in case wanted to add this in.
Using var may be more familiar to you, but it's spilling the variable scope all over the place, keeping variables that are no longer needed in memory because you're allowing them a class-wide scope. Instead, use const or let, the keep the variable context contained within their lexical scope. If you need access to one of those locally scoped variables, it can be solved through composition (the way you've organized your functions).
As to the problem you originally posted about, all of the problems I listed may be contributing; typos in JSX, class instead of className, async timing problems. Although perhaps the primary issue is regarding number 3. You are returning the value of tmp and binding it to return_rule possibly before the AJAX call has time to resolve. I would recommend refactoring your handleRuleRoom function using the async/await example I provided as a guide.

Answer 2

Your handelruleRoom function has no index declared inside its scope
So you just need to figure out what is index inside your handelruleRoom function which is probably the last argument of it you called it - i
Try changing index to i
like this
this.showLoading(e, DetailsRoomJ, i);
// and also here
return this.setState(prevState => ({
resultRule: { ...prevState.resultRule, [i]: return_rule },
loadingVisible: { ...prevState.loadingVisible, [i]: "" }
}))
Also if you care there are many things wrong with this snippet
class should be className
are you sure you need a sync function (because you are blocking you browser until you get your response)