How to initialise boolean variables in react? - reactjs

Question

i have a variable named data which is a array of objects as below,
data = [
{ attributes: [],
info: '',
meshes: [],
}
{attributes: [],
info: '',
meshes: [],
}
.....so on....
]
When the info is defined will display message info available..if info undefined will display message info unavailable.
So i do it like below within render function of the component
export default class DataInfo extends React.Purecomponent {
state = {
data: null,
};
componentdidMount() {
load_data();
}
load_data = () => {
/*send a request to server for fetching data and
set data state */
}
render = () => {
return (
{this.loading &&
<div className="spinner"/>}
{!this.data || (this.data && this.data.every((data.info) =>
!data.info)) &&
<div>No info available</div>}
{this.data && this.data.some((data.info) => data.info) &&
<div>info available</div>}
);
}
}
Now withing the conditionals rather than using the below statements,
this.data.every((data.info) => !data.info)
this.data.some((data.info) => data.info)
I want to have them defined as some explanatory variables...like has_some_info and has_no_info.
So to achieve it, within render function i tried using something like below,
const has_some_info = this.data ? this.data.some((data.info) =>
data.info): 'false';
const has_no_info = this.data ? this.data.every((data.info) =>
!data.info): 'false';
But this is not correct. it doesnt work fine..i don't want to initialise it to intialise variables to false....
Could someone help me to defined these variables....thanks.

Answer 1

In the first place, you should realize that every and some are the opposites and you don't have to calculate them both:
const infoAvailable = (this.state.data || []).some(data => data.info);
const noInfoAvailable = !infoAvailable;
In other words:
render() {
if (this.state.loading) {
return <div className="spinner"/>;
}
const infoAvailable = (this.state.data || []).some(data => data.info);
return infoAvailable
? <div>Info available</div>
: <div>No info available</div>;
}
(also note I have used this.state.data to access data).

Answer 2

export default class DataInfo extends React.Purecomponent {
state = {
data: null,
};
componentdidMount() {
load_data();
}
load_data = () => {
/*send a request to server for fetching data and
set data state */
}
render() {
const {loading, data = []} = this.state;
return (
{loading &&
<div className="spinner"/>}
{data.map(ele => ele.info
? <div>info available - {ele.info} </div>
: <div>No info available</div>
}
);
}
}
If you need self explanatory variables for info you could use !!ele.info which gives whether data is present or not.