Reddit Client, need help being able to grab the data from JSON

Projects Portfolio Project: Reddit Project
1

Hey everyone,

So the current issue that I face is that I’ve fetched the data from the reddit JSON page, but I am unable to get that data from the store. I’ve used the useSelector method and destructured it to get a variable which works according to VS code but its when I try access data from the destructured variable the localhost says that there is nothing to access.

I have looked for like a week through the internet watching tutorials etc trying to find what I’m doing wrong and the solution is evading me still. I’ve also had a look at the answer that codecamdy provides which led to to change my code slightly so that the returned object of the fetch is mapped into an array. However, this still hasn’t worked.

If someone could point me in the right direction or point out what I’m doing wrong in either my approach or in my code that would be really helpful.

thanks :slight_smile:

github repo:

2

Is this a project or something, if so it’d be worth linking it so folks have an idea of what you’re trying to do and how you’re going about it.

At present your github repo seems to be private so no-one can view it.

3

Did you use BeautifulSoup to grab the data?

4

Really sorry for making some mistakes.

First the project is the reddit client, end of the front end engineer part of the full stack engineer course.

No i didn’t use BeautifulSoup to grab the data, i just used fetch request.

The repo should now be available below:

5

Hi @apocalypses
I am currently working on this project. In case you still need help with this, could you post the code from the slice that holds the data and the file that’s supposed to receive it here?

6

Hi, thanks for the offer to help but i managed to find the errors in my code, it was a death by a thousand cuts with many small syntax errors in redux. I also stopped doing this project as once i sorted everything out, my requests to grab the reddit data went weird not sure why it went wrong. I think it could be that i made too many requests, but that seems unlikely.

1 Like
7

Hi,

see my below post, plus is the github repo above not working ? As that is where all the code should be.

8

I understood your post like a “thanks for the offer, but I went past that project and don’t intend to come back”.
The repo link is working, but I’d rather prefer you to tell me where to look exactly and for which problem exactly. In case you still need help with this, please describe which problem you encounter in detail and in which file you think the error could be.

9

Hi, I’ve had another look at my file and i its now allowing me to grab the reddit data but I now have a new issue of nothing rendering due to " Objects are not valid as a React child". This is occurring in my feed.jsx (feed folder) . Now i’m not too sure why this is happening, I have looked at the stack overflow and the way to fix the issue is with the map method but I have a map method going through the data. I’m a bit perplexed at what i’m doing wrong,

thanks :slight_smile:

10

This error happens when you try to render objects. And it usually happens when you map an array of objects and expect the values to be strings while they are still objects.

{redditData.map((element, idx) => (
  <div className = "post" key = "idx">
    <div className = 'vote' >
      {element.ups} // <-- what is this? console.log it before you render it

Have a look what you receive as “element” by logging it…

11

So I have tried to implement your idea, but it appears that the component in feed.jsx is not running as nothing is being logged. The element.ups is upvotes obtained from reddit JSON data and is meant to be the number of upvotes.

12

But it probably isn’t.

Did you log element ? It must log something, be it undefined, otherwise your component isn’t mounting. Render an empty div rather than the mapped element in order to avoid the error message.

13

the return section of the feed component isn’t working, but i think the probably lies in the above code as i removed all the content of return() and the same error was still being thrown. I can’t think what is throwing the error of “react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {kind, data}). If you meant to render a collection of children, use an array instead.”

14

You already logged redditData. Did it log valid data?

15

yes, the data being logged by the fulfilled thunk is valid data, its an object that holds an array of objects.

16

Ok then what does this log:

export const Feed  = () => {
// you code up until render
console.log(redditData[0].title, redditData[0].ups, redditData[0].thumbnail, redditData[0].author_fullname);
return <div/>
}
17

I have just imputed the recommend line into the code, it didn’t log anything, which is weird it appears that nothing is logging inside of the component. The thing that is confusing me is that an error is thrown but the solution of the error on stack overflow is already being used: javascript - Objects are not valid as a React child. If you meant to render a collection of children, use an array instead - Stack Overflow

18

The reason for the error is what I described in my first post. If the console in the component does not log anything, it’s not mounted in the first place and the trouble is probably caused by another component. The error message must also say where the error occured.

19

the issue you mention with mounting the data, i think is solved due to the useEffect() and the useSelector() that handle the automatic mounting of the new data. Have you run into this issue during your reddit client project, as if not I could have a more fundamental error with my code that relates to my request or slice.

20

I received the error message 'Uncaught Error: Objects are not valid as a React child' several times during several projects. The cause was always within the map method: I was trying to render JSX containing an object while I was assuming it was a string. That is also the case in the stack overflow thread you posted.
I am pretty sure that this is the cause of your error message, too. I just don’t know in which component it occurs. That’s why I suggested that you have a closer look at the error message as it must tell you in which file the error occurs.
If the component is mounted and you do not have anything breaking your code before the console (which you appently don’t because you say the console in your code logged the redditData object) the console I suggested above must log something… (It must be before the return statement)