React native cannot read property '0' of undefine - javascript

I'm new with ReactJS and today I have encountered a few problems.
I am currently using Redux to store my data and I was able to retrieve all the data from the props.
Ie.
const { recipe, loadingRDetail } = this.props;
console.log(recipe.macros);
recipe macros will show me 5 values in array.
Array Image Console Log
But when I tried to accessed to the array, It will throw me an error "Cannot read property '0' of undefined".
I have tried
console.log(recipe.macros[0])
and
const {macros} = recipe;
macros.map((i) => {
....
}...
I have no luck with both of these
This is the error I get
Red Warning error

Actually, it's just because your macros data is asynchronously loaded so you have to add a test to check if it's loaded.
You can try this:
const {macros} = recipe;
if (macros && macros.length) {
macros.map((i) => {
....
}...
}
Or if you already are in your Render method you can just try this :
const {macros} = recipe;
return (
{
macros && macros.length && /* It will check if macros has elements inside */
macros.map((i) => {
....
}...
}
}
)

Related

Youtube playlist thumbnail image not working in Next Js

In my next js app I'm fetching YouTube playlist and assigning them dynamic card. but when I use map the url doesn't work but in plain omg tag it works fine.
the code is as follows.
index.js
function Home({result}) {
return (
<...
<ShowsView result={result}/>
.../>
)
} export default Home;
export async function getStaticProps(){
const MY_PLAYLIST = process.env.YOUTUBE_PLAYLIST_ID;
const API_KEY = process.env.YOUTUBE_API_KEY;
const REQUEST_URL = `https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${MY_PLAYLIST}&key=${API_KEY}`;
const response = await fetch(REQUEST_URL);
const result = await response.json();
return{
props:{result: result},
revalidate: 3600,
}
}
In my index file executing result.items[0].snippet.thumbnails.maxres.url will return a url for the image. the issue is when I map it through the url doesn't work.
{result.items.map((res, idx)=>{
//console.log(res.snippet.thumbnails.maxres);
//console.log(res);
//console.log(result);
return (
//<ShowCard result={result.items[idx].snippet.thumbnails.maxres.url} key={idx}/>
<ShowCard result={res.snippet.thumbnails.maxres.url} key={idx}/>
);
})}
using like this it return every data until I get to the thumbnails. res.snippet.thumbnails.default this works. but res.snippet.thumbnails.default.url throws an error.
TypeError: Cannot read properties of undefined (reading 'url')
This error happened while generating the page. Any console logs will be displayed in the terminal window
The log points after default. What is the mistake here?
Perhaps res is also being accessed during init of the app, which is an empty object.
try doing this:
res.snippet.thumbnails.default?.url

how can I fix Cannot read property 'error' of undefined

I fetch Data and want to output the data. It Works but I also want to make a error handling.
Like:
const func = async data => {
try {
const res = await fetch('MY_URL);
const out = await res.json();
if(out) {
const name = out.result.name;
if(out.result.error) {
console.log('ERROR');
}
}
} catch(e) {
console.log(e);
}
};
Why I get this message?
Cannot read property 'error' of undefined
Ok, I dont have an object with error, but I want to say If there is an error object, then I want to show anything else.
How I fix it?
EDIT:
// Error Handling Statuscode
if (out.result[0].statuscode.error) {
allCircle[0].innerHTML = errorIcon;
domainInfo[0].innerText = out.result[0].statuscode.error;
}
I dont have statuscode.error. But If an Error in my system happens, then I get the property error. So how can I say If error exists? Because error property doesnt always exists.
You could try something like:
if(out.result && out.result.error) {
console.log('ERROR');
}
That way you would shortcut the evaluation of the error property if there is no result property in the first place.
Why I get this message?
Cannot read property 'error' of undefined
this because your out object does not have result parameter every time, and returns undefined at that time so you cant access to out.result.error because out.result is undefined
Solution
if(out?.result?.error) {
console.log('ERROR');
}

Cannot read property 'includes' of undefined in reactjs?

I try to resolve includes undefined, For that, I am using && operator.
isAllChecked = label => {
const { permission } = this.state;
false value - I need false value when I get data from API,
But I got an error that includes undefined. for that, I used && operator
but I got a true value, I don't need to get true value
const data = !groupItems.some(
x => !permission && !permission[label] && !permission[label].includes(x)
);
// console.log(true) //true
const data = !groupItems.some(
x => !permission[label].includes(x)
);
// I got a false value using static data without using && operator
// data output: false (accepted output- getting using static data, but I need
to get the same value when I get data from API, I got an error includes undefined without using && operator)
return data;
};
However, If I got data from API, this method is displayed can not read property undefined and when I am going to resolve 'includes' of undefined, I used && operator and I got true value.
Cannot read property 'includes' of undefined.
I don't need true value, I need false value for the initially mounted component.
my question is that how can I resolve Cannot read property 'includes' of undefined by using && operator or anything.
Here is my code sandbox: https://codesandbox.io/s/stackoverflow-a-60764570-3982562-v1-um18k
Instead of some, you can use every to check all.
isAllChecked = label => {
const { permission } = this.state;
const data = groupItems.every(
x => permission && permission[label] && permission[label].includes(x)
);
return data;
};

Undefined error getting in javascript (React Native)

I am storing particular key value in Database. But, While fetching the key value, getting undefined error.
await DbHandler.fetch(codeStatus)
.then((result) => {
const codeEnabledObj = result[0];
console.log('codeEnabledObj', codeEnabledObj);
let codeEnabled = false;
if (codeEnabledObj && codeEnabledObj.length > 0) { // this code not executing at all.
codeEnabled = codeEnabledObj[0].isEnabled;
}
console.log('codeEnabled', codeEnabled); // getting false always
console.log('codeEnabledObj.length[0]', codeEnabledObj.length); // undefined
})
.catch((error) => {
});
The issue is, It's not going inside if condition and throwing error like undefined.
But, If we print the response from db fetch
'codeEnabledObj', { type: 'codeStatus', isEnabled: true } // This is my response
Any suggestions?
Objects don't have length property like an array.
codeEnabledObj.length is wrong
use this,
Object.keys(codeEnabledObj).length
EDIT :
codeEnabledObj[0].isEnabled should be only codeEnabledObj.isEnabled
There is no property length in the codeEnabledObj , Moreover its not an Array.. so modifying the condition would work, where isEmpty could be a function used from
node package as underscore
if (isEmpty(codeEnabledObj)) { // ... }
and
codeEnabledObj.isEnabled
Thanks.

How can I print the information to the screen fetched from firebase?

I am struggling to console log the information fetched from firebase.
My code:
class HistoryPage extends Component {
componentWillMount() {
this.props.historyFetch();
}
render() {
var ob = this.props.xyConsts[0];
console.log(ob);
return (
<Text>{this.props.xyConsts[0].const1}</Text>
);
}
}
const mapstateToProp = (state) => {
const xyConsts = _.map(state.historyPage, (val, uid) => {
return { ...val, uid };
});
return { xyConsts };
};
export default connect(mapstateToProp, { historyFetch })(HistoryPage);
From console log, I got information can be seen here the console log printout
It looks like an object. But when I want to print out "this.props.xyConsts[0].const1" or other key, I got undefined.
I suspect that the info returned from firebase is not an object, but how can I reach and print things like "this.props.xyConsts[0].const1" on the screen?
Any help will be appreciated.
There are mainly two possiblities:
1) Try to check you are getting the correct object in screen or not.
2) If object is correct then take a object ref like this:
var ob = this.props.xyConsts[0];
console.log(ob);
return (
<Text>{ob.const1}</Text>
);
You can use object in two different way:
ob.const1
and
ob['const1']
Hope this will help you...

Categories