Playlist access kar lena: ru-vid.com/group/PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt If you are on Instagram, you can follow me there for more updates on courses & other stuff: Instagram.com/codewithharry
When I was following the code by Harry Bhai there got an error when fetching the data from the API. this is what I did to resolve the error (I guess this would work for you ) : async componentDidMount(){ try{ const res = await fetch(url); const data = await res.json(); this.setState({ articles: data.articles }); } catch(e) { console.log("something is not working"); } } PS. You can use axios too
Hello, Harry Bhai! You can use below code for adding three dots to title and description of news: style={{maxWidth: '100%', display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, overflow: 'hidden', textOverflow: 'ellipsis'}} Thank you! Love from solapur
If you want to make all the cards to equal height then follow this: In the div with className="card" , add a class called "h-100". Now every card should be of same height but the buttons are not aligned properly due to the difference in content of the different cards. To fix this, in the div with className="card-body", add classes "d-flex flex-column". Then finally, in the read more button add a class "mt-auto". This should make every card equal height and make them look better. If any problems, feel free to ask :)
Hi ..could you plz let me know why the fetch api was used in componentDidMount() and not in the constructor(). I understand it means the fetch API happens after rendering but my question is "why"? Why can't it happen at the very outset ?
@@ummi7292 Because you cannot make a constructor async in JavaScript. if we use fetch() API without async and await then it will asign value to data variable as a pending promise (it will assign varaible first because of Asynchronous nature of JS )
i recently start following this course and i am loving it, thank you so much while learning "fetch" i was getting this error "TypeError: Cannot read properties of undefined (reading 'map')" From reactjs Docs - this is what i found and works for me, may be it helps other too fetch(url).then((res) => res.json()) .then((json) => { this.setState({ articles: json.articles, loading: false }); })
Hello, buddy, if you're also get stuck with same problem I had been, just paste it async componentDidMount() { fetch("url").then((response) => response.json()) .then((data) => { this.setState({ articles: data.articles }); }); }, If anyone can explain me why the old one did not work please help me out.
Hii, i am still stuck with not getting any news from api show on the browser. I can see thtat the api is working as I can see the result in console tab, but not on the web page. No error is displaying as well
Hii, i am still stuck with not getting any news from api show on the browser. I can see thtat the api is working as I can see the result in console tab, but not on the web page. No error is displaying as well
for those whose componentDidMount is not working i found this syntax and it worked for me here is my News.Js file import React, { Component } from 'react' import NeswItem from './NewsItem' export class News extends Component { constructor(){ super(); this.state={ data : null, loading : false } } componentDidMount(){ let url = //your url fetch(url).then((res)=>{ res.json().then((result)=>{ console.log(result.articles) this.setState({data:result.articles}) }) }) } render() { return ( Top Headlines {this.state.data ? this.state.data.map((element)=> ) : null } ) } } export default News
If render is called before the componentdidmount, then how articles is being displayed on the page. Because page will be rendered first, and after rendering the page component did mount will be called where we are fetching the data from API?
I think that's why he used async await function which stops all other function and fetch data and then render so using async function it will wait for fetching and then render page
For the algorithem. Altho i bought a course on udemy before this course started but i know harry bhai's the best. So im liking and commenting on every video for the algo.
I would comment in every video till you don't reply. I am really thankful to you. I didn't have cs in 12th but learned programming c and CPP from your videos and still learning. Moreover, I got a confidence boost. Once again thank you for your efforts.
Constructor Render Component did mount That’s the reason it’s not displaying in browser and if you map in component did mount and you can see the output.
If someone is getting error "Cannot read properties of undefined (reading 'map')" then use this this.state.articles && this.state.articles.map((element) ....
@@avadhut9017 It checks whether the array is NULL or not, if it is null then (i.e it will check this.state.articles is NULL or not ), if it is null then it will not run the code. We have to do this because if it is null then .map function will throw error.
if anybody having error for undefined:state Simply add this to componentDidMount : .then(response => response.json()) .then(data => this.setState({ articles: data, loading: false }));
harry bhai koi effective way nahi hai kya API se data fetch karne ke liye? ....becauce everytime we click next ...it again request the api........jisse apne request waste ho rahe hai...... there should be a way jisse app ek sath hi sab page load kar lo ..then after usse page mai seprate kar lo........
harry bhai 7:47 hum element.title && element.title.slice(); and same for description also bhi use kr skte hai nah maine wahi kiya tha aur usse thik hogya tha.....
hey harry one question, first the constructor is called then render is called and only then componentdidmount is called which brings the data. if render is called before componentdidmount, then how is the fetched data rendered and shown to our page
componentdidmount function re-renders the page immediatly after changing the state..thus first constructor then render then componentdidmount then render again..
i recently start following this course and i am loving it, thank you so much while learning "fetch" i was getting this error "TypeError: Cannot read properties of undefined (reading 'map')" I have used below code in constructor and its working fine.... constructor() { super(); console.log("This is constructor") this.state = { articles: [], loading: false } }
update your code instead using this.setState({articles:parsedData.articles}) you can use this.setState(this.articles=parsedData.articles) and also cannot remove the articles array that you already initialize in the first place.
@@sheikhmuzamil7218 async componentDidMount(){ const res = await fetch(url); const data = await res.json(); //Here I used this.setstate we must use this.articles.setstate// this.articles.setState({ articles: data.articles }); }
I have an error when mapping parseData this is how i resolved the error this.state.article?.map((element) => console.log(element)) we have to write an extra question mark in state.article🧐🧐
I have an error when mapping parseData this is how i resolved the error this.state.article?.map((element) => console.log(element)) we have to write an extra question mark in state.article
@@safanvhora4970 please reply me bro it solves the map function error but it doesn't rander data in card please help me I am stuck on this error from previous 4 days please help
Friends, if your data is not fetched using API , then you can change your default browser from Chrome to Microsoft edge, this may fetch data, as I was struggling for 3days, and when I change the default browser it suddenly loded all the news
int [] arr={1,2,3,4,5} another way is by mentioning the size--> int [] arr= new int[4]; arr[0]=1; arr[1]=2; .. and do check the java playlist for detail.
@@FarhanAhmad-ll5fn there may a lot of reasons, it is impossible to track it without seeing the actual code, you may paste the errors here, we can see it. One possible reason may by, you are not using localhost:3000, instead you are using 198.162.xx.xx ip address, using ip address will not work, instead open the localhost link, other possible reason may be the wrong apikey, or a expired api key.
whoever getting error like this "TypeError: Cannot read properties of undefined (reading 'map')" please try this solution , change fetch(url) to fetch(url).then((res) => res.json()) .then((json) => { this.setState({ articles: json.articles, loading: false }); }); it should work
Why I am getting uncaught TypeError : " Cannot read properties of undefined (reading 'map') " In News.js Nothing is showing on page. Please help me. If anyone of you getting the same error 😔😔
I have an error when mapping parseData this is how i resolved the error this.state.article?.map((element) => console.log(element)) we have to write an extra question mark in state.article
Is there a way to filter news without an imageurl. Like to ignore, if the article doesnt have an image url. And show only does having a image url. Please help.
i'm getting ERROR in [eslint] src\components\News.js Line 71:3: Parsing error: Unexpected token (71:3) webpack compiled with 2 errors and 1 warning please help me rectify it
I have an error when mapping parseData this is how i resolved the error this.state.article?.map((element) => console.log(element)) we have to write an extra question mark in state.article
TypeError: Cannot read properties of undefined (reading 'map') i am getting this error after that slice error and i can't solve it can please anybody help
Same problem how can they place data in empty array the article arrays are empty this is the typeerror my api fetching data in console but not displaying in article array
Hello Harry Bhai, I am in diploma, I want to buy a laptop, which processor is better for diploma and Degree of Information technology ? intel i-3 or intel i-5 ? ryzen-3 or ryzen-5 ? Please reply me....
#HarryBhai, Harry Bhai, big fan. But I have a question, what is promise? I think I have missed this part. Can you please tell me in which video have you discussed about it?
Mr Harry ek masla hai mere kuch news cards pay image abi bhi display nai hooa aur request timed out ka error show kr raha hai console main to wo kesay resolve ho ga?
I have an error when mapping parseData this is how i resolved the error this.state.article?.map((element) => console.log(element)) we have to write an extra question mark in state.article
data are not coming in card which we used to populate the news items please help me data are not coming in card which we used to populate the news items please help me data show in console but not show in cart
