axios_humidity_data = () => {
let s = true;
if (s) {
return new Promise((resolve, reject) => {
try {
axios
.get(
`http://35.204.247.157:8086/query?pretty=true&db=octobus&q=SELECT "humi" FROM "data" WHERE "assetMac" = 'F5:64:47:40:2E:03'`
)
.then(response => {
const data = response.data.results[0].series[0].values;
let date = [];
let humidity = [];
data.forEach(chart_item => {
date.push(chart_item[0]);
humidity.push(chart_item[1]);
s = false;
return;
});
this.setState({
humidity_data: {
labels: date,
datasets: [
{
label: "Humidity %",
data: humidity,
backgroundColor: [
"rgba(255,105,145,0.1)",
"rgba(155,100,210,0.1)",
"rgba(90,178,255,0.1)",
"rgba(240,134,67,0.1)",
"rgba(120,120,120,0.1)",
"rgba(250,55,197,0.1)"
]
}
]
}
});
// console.log(data);
resolve(data);
s = false;
return;
});
} catch (err) {
reject(err);
}
});
} else {
console.log("data is not available");
s = false;
return;
}
};
This can be done in multple ways.
1. As suggested above, before `return` store all elements in the array
2. Loop inside `return`
Method 1
let container =[];
let arr = [1,2,3] //can be anything array, object
arr.forEach((val,index)=>{
container.push(<div key={index}>
val
</div>)
/**
* 1. All loop generated elements require a key
* 2. only one parent element can be placed in Array
* e.g. container.push(<div key={index}>
val
</div>
<div>
this will throw error
</div>
)
**/
});
return (
<div>
<div>any things goes here</div>
<div>{container}</div>
</div>
)
Method 2
return(
<div>
<div>any things goes here</div>
<div>
{(()=>{
let container =[];
let arr = [1,2,3] //can be anything array, object
arr.forEach((val,index)=>{
container.push(<div key={index}>
val
</div>)
});
return container;
})()}
</div>
</div>
)