Hi guys
I have just started the reddit client project today, and I have ran into a bit of an issue.
I am wanting so that when i click on the comments button the comments drop down, I have tried various different methods but cant get anything working and dont really know what to type into google, I will link my git repo and if anyone is able to take the time to help I will greatly appreciate it. Thanks.
Cool app idea! Iâm just diving into the world of React as well so I donât have a solution necessarily, but I think Iâve spotted your problem.
In your App.js file, youâre rendering the Post components with map method on the posts array. With each rendering, youâre giving the Post a prop called comments and assigning it to the post's data.num_comments. For your app, it looks like a good idea to be handing the Post components the num_comments, but if you inspect the JSON that youâre fetching from, you can see that num_comments is assigned to a integer and nothing else.
From inspecting the JSON, I canât see find any key/value pairs that could render the comments section. However, it does have one key called permalink that links directly to that post on reddit. Upon pressing the comments button in your app, you could possibly fetch another JSON file from that permalink that does contain a key assigned to the comments.
Hey
Post some sample code in a branch so we can see what you are doing. My initial guess is you want to have a new component called comments which has the css style feature display:none; Then when you click on a button it sets the display to visible. That way you can make the comments appear on a click.
I wouldnât make it any more complicated than that until you have it working. Then you can start thinking about dynamically loading the comments from Reddit or adding animations to make it appear maybe?
Let me know if this helps.
hey, man thanks for the reply finally got it working with lots of sweat and tears, i have it in a second branch called master
Thanks for the reply, finally got it working 
I am still trying to get my head around something. I noticed you passed in some code between curlbraces in your code.
I donât understand how does the code know where to find those props?
import React from 'react';
const UserReplies = ({coms, userName}) => {
return(
<div className='getReplies'>
<h3 className='userName'>{userName}</h3>
<h6>{coms}</h6>
</div>
);
}
export default UserReplies;
The following two commands are the same:
const coms = props.coms;
and
const { coms } = props;
So instead of assigning afterwards you can do so in the arguments for the function which is what has been done in the code youâve quoted.
Let me know if that doesnât make sense
Ok so they are just two different ways of writing it
Hey, so a good way to a very simple explanation is from dec Edâs recipe app tutorial, you can pass props outside of app.js but canât pass them in from components? I could be wrong with that statement but thatâs my understanding
Hi Alex
I am still trying to get my head around exactly how the project gets the subreddits and number of subreddits from reddit.
Could you share a link to the webpage so I can review the code in chrome dev tools.
If you could explain what files are needed to get the content from the reddit api that would help alot.
It helps to learn when I can see some working examples and then reverse engineer the code to understand how things are done.
regards,
Patrick.
Hi patrick i have the app running on netlify, be aware images are super low res, which is something im going to go back and change but didnt want to get too hung up on this project, i think you might be able to use the dev tools to get a rough understanding, here is the link. https://redditminimalfirst.netlify.app/
thanks Alex
Hi
Has anyone implemented this requirement:
Users are shown a detail view (modal or new page/route) when they select an item
i cant find any example doing it .
can anybody send me a api url in json atleast
I have implemented this project, i just need to incorporate jest testing into it.
i used the following extra packages
1.react-bootstrap
2.react-icons
3.react-animated list
extraReducers: {
[fetchPosts.pending]: (state) => ({
state.status = 'Loading...',
}),
The error says Unexpected token, expected â,â and it is saying the â.â between state and status is underlined.
I could be wrong but I think the â,â after âloadingâŚâ could be causing your error?
Thank you, but I tried replacing it with nothing and with a semi colon but the error with the â.â persists.
Thanks for trying I appreciate the feedback.
extraReducers: {
[fetchPosts.pending]: (state, action) => {
state.status = âloadingâ
},
Found that on the redux documentation hope it helps, Iâm a bit useless with react, sorry manđ
No problem, Thanks for trying my friend
Hi All,
I hope you are well!
I am working on this project and cannot get through the first initial API call request to Reddit.com.
Please see below code which i tried to fetch the API data.
const loadAll = async () => {
const response = await fetch(`https://www.reddit.com/r/.json`);
const data = await response.json();
alert(data);
};
It keeps coming with below error messages on my Chrome console:
"Access to fetch at âhttps://www.reddit.com/r/.jsonâ from origin âhttp://localhost:3000â has been blocked by CORS policy: No âAccess-Control-Allow-Originâ header is present on the requested resource. If an opaque response serves your needs, set the requestâs mode to âno-corsâ to fetch the resource with CORS disabled."
"GET https://www.reddit.com/r/.json net::ERR_FAILED"
I have no idea how to fix this as cannot get any data back from API.
Any suggestions on how this get works would be much appreciated?
Please let me know of your comments.
Thanks in advance for looking into this.
Naiya
Maybe https://www.reddit.com/r/memes.json might work?
I think it is maybe because you used /.json