last day (15 days later) » 

19:37
0
A: componentDidMount not firing in React

Paul McloughlinI would recommend using the Fetch API for AJAX calls and making use of ES6 Async/Await, since importing an entire library just for Ajax seems a bit overkill. import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { constructor(props) { super(prop...

I tried to implement the async getCollection but I get this error: Uncaught Error: Module build failed: SyntaxError: Unexpected token, expected ; (72:15)
Are you able to link the entire file, in your question.
im not sure i understand your question..
Sorry, i've updated my code formatting. Try that.
I appreciate your help and have implemented your code, componentDidMount is still not being triggered
19:37
How are you using the component? Update the question, with the changes you've made. So I can see completely how you're using it. because it's working for me.
Hello
@Brayheart Hello?
So what code do you have so far
i updated the question
thankyou so much for taking such an interest in my problem
i used this as a means of templating my ajax request stackoverflow.com/questions/30976158/…
Sure, i'm looking at it now, do you ever use codesandbox.io
It's a great way of making React apps
without having to worry about build tools and like
whaaaaaaaaaaat
is thiiiiiiiis
can react handle mobile apps and VR
19:42
yes my dude
i just want this freking ajax async whatever call to work
im doing this bootcamp to become a web dev
React-Native for building IOS and Android apps
oh nice
What bootcamp?
ive defered once so ive been coding for 12 weeks 6 days a week
and im doing this assessment rn and i feel like imma fail
and the thing is this is my first time making a request to a db from the client side
Dont worry you will be alright#
Bootcamps are very difficult
have you coded before?
w/e idk if its hard i just want things to go accoring to plan
kindaaaaaa
like i follow net ninja media traversy and some subreddits
i joined the bootcamp cause i was thinking ok ez ill get employment im not an idiot i can totally do this
but now im on this assessment and im just like why is this the first time im doing this, shouldnt i have done this before
im just venting
i have my state setup fine, i have subcomponents that will handle the data, i got it to work with a sample set, all i need to do is pass in the info from the mongodb
I've never used componentDidMount and it wont fire
so i have this console log: console.log('feed', this.state) that i put in the renderview in the if statment and it triggers BUT the collection is still empty
Line 50
Now I don't have your full project
for me its line 75
so I don't know what you're importing
if i could id probs show you
hu
19:49
well, transfer it to coding sandbox
and link me to it
I could assist you
line 50 on the pastebin
i'm talking about
guy, I don't have the full project, so I'm unable to see what the Feed is doing, what the API is doing or anything
this is what the componentDidMount should be calling when it gets triggered
app.get('/api/blogs', function(req, res) {

Blogs.find({}, function(err, collection) {
res.json(collection)
})


});
no API
just a mongodb
Right, you need to include the address
it the DB hosted locally?
feed is litterally just taking in an array of objects and passing them to another component that renders them
yes
only has sample data that I seeded
im just trying to pass that array of objects to feed which i can do
BUT the request to the DB is never made as far as i can tell
so im only passing in an empty string and when it tries to map over it
19:53
collection={this.state.data}
its like bruh this isnt an array this is a string
You want to pass the collection
yea
yes
You don't have a data property on the state object
this.state.collection
would reference the associated array
but the issue for yoou
is that the API is not even making the call
i knoooww
19:54
Where are you hosting the project?
good call on the data being the wrong thing
changed it so now its this.state.collection on line 76
on my machine
right, how many files do you have
or better yet
do you have a sample
like the file structure
of the data
that you're trying to work with
yee 1 sec
19:55
like a couple of json objects
so we can see if the front end is working, then you work on the API connection issue.
im like 90% sure an api connection issue
front end is able to render sample data easy
link the Feed component code
import React from 'react';
import View from './view.jsx';

const Feed = (props) => (
// console.log('feedprops', props),

<div className="Feed">
<ul>
{props.state.data.map((item, i) => <View key={i} item={item}/>)}
</ul>
</div>
);

export default Feed;
import React from 'react';
var moment = require('moment')
;
const View = (props) => (
// console.log('viewprops', props),
<div className="view">
<ul>
<li className="feed-list-item">
<div className="feed-list-item-title" onClick={props.handleClick}>{props.item.title}</div>
<div className="feed-list-item-byline"><span className="feed-list-item-byline-author">{props.item.author}</span>{moment().startOf('hour').fromNow()}</div>
<img src={props.item.imageUrl} onClick={props.handleClick} className="feed-list-item-image" />
next one is view component :p
yer, so Props and State are different things
i know
D:
19:59
props.state
:/
not to worry
oh
changed it to props.collection
idk im the only person who deferred in my first cohort
idk if i fail my backup plan was to do mini-projects via youtube
then try and get small remote gigs
and idk maybe try to get a fulltime gig
sure
const Feed = (props) => {
let { collection } = props;
return collection.map((data, i)=> {
return <h1 key={i} >{data.title} </h1>
})
}
so, that is a rough idea of what you should be doing, that is the general pattern
does that make sense?
I have work in about 10 minutes
yea
np
im just trying to get the ajax/async call to work
Yer, the issue is with the back end connection
there is no problem with the c ode
try from a API tester
like postman
but like componentDidMount isnt firing
postman gets the data no problem
if you gotta go no worries
thanks for being there
20:12
so, the code works with the json data
no issue with the front end, in rendering, the issue is definetly with the API connection
so Test the routes using getpostman.com
and dont give up
Coding is not easy, it is hard
that's why not a lot of people do it
i aint giving up
naw man codings easy
because you have to want to do this
learning it is hard
well, good programming is hard.
naw man i like it
ha probably
20:13
let me know how you get on
you mean in general or with this api thing
ha, both
but the API thing
currently hitting my head against desk
figurativly
copy and pasted what you sent now i get
Error: _registerComponent(...): Target container is not a DOM element.
because you index code
what is your index.html
saying
link it bruv
dont think there is one tbh
wait there has to be
20:17
lol, there has to be
haha
was going to say, my dude
reactDom.render
getelemtnbyid
that part
needs to match the name of the div in your index.html
<App part
fuck it works
freaking paul from across the pond saves the day
i dont know why you helped me, but I litterally cannot find the words to express my gratitude
also i followed ur github
Well, set your question to answered
that would help me ha
No problem my guy
Trying to build my stackoverflow rep
dude you freking rock
y u trying to build rep anyway
i curious
does it help with job stuff
20:21
eh, just something to show employers
since i'm a call center pleb trying to become a web dev
eyyyyy
anyways my guy, i'm off to work, my taxi is here
peaceeeeeee
for sure
l8ter

last day (15 days later) »