Reddit Minimal

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.

1 Like

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.

1 Like

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 :slight_smile:

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

1 Like

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 :slight_smile:

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