Render the Note Form

From @jayair on Mon Apr 10 2017 01:06:57 GMT+0000 (UTC)

Link to chapter - http://serverless-stack.com/chapters/render-the-note-form.html

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/54

From @mikhaelbendavid on Wed Jul 26 2017 06:55:14 GMT+0000 (UTC)

When I click a note to examine, the page redirects to prod/notes/undefined - and I get an error. Trying to figure out why the pushed link is undefined, instead of the dynamo db note id.

From @jayair on Wed Jul 26 2017 17:13:45 GMT+0000 (UTC)

@mikhaelbendavid You can check what is being returned by adding a console.log here - https://github.com/AnomalyInnovations/serverless-stack-demo-client/blob/render-the-note-form/src/containers/Home.js#L31.

From @RaphaelMui on Wed Aug 09 2017 09:25:02 GMT+0000 (UTC)

When I click one of my note, a status code 500 returned.

From @jayair on Wed Aug 09 2017 17:23:03 GMT+0000 (UTC)

@RaphaelMui The 500 error should be something we are generating. Make sure the link for the note looks right. You can also check your CloudWatch logs for the error.

From @RaphaelMui on Thu Aug 10 2017 08:36:32 GMT+0000 (UTC)

@jayair The Request URL is https://uy6essyal3.execute-api.us-east-1.amazonaws.com/prod/notes/9704e3b0-7d82-11e7-9f52-abe788a40b9a

From the CloudWatch logs,

2017-08-10T08:13:34.778Z	cd8bc624-7da3-11e7-a4d5-bf4a01ad26b2	ReferenceError: error is not defined
at _callee$ (/var/task/get.js:199:27)
at tryCatch (/var/task/node_modules/regenerator-runtime/runtime.js:65:40)
at GeneratorFunctionPrototype.invoke [as _invoke] (/var/task/node_modules/regenerator-runtime/runtime.js:303:22)
at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/var/task/node_modules/regenerator-runtime/runtime.js:117:21)
at step (/var/task/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
at /var/task/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
at process._tickDomainCallback (internal/process/next_tick.js:135:7)

From @jayair on Thu Aug 10 2017 23:13:43 GMT+0000 (UTC)

@RaphaelMui Hmm that seems a bit cryptic. Can you try adding some debug message? For example, you can add a console.log before this line - https://github.com/AnomalyInnovations/serverless-stack-demo-api/blob/master/get.js#L27

From @inventanew on Thu Dec 07 2017 19:43:48 GMT+0000 (UTC)

I’m getting this error…
./src/containers/Notes
Module build failed: Error: ENOENT: no such file or directory, open

From @jayair on Mon Dec 11 2017 11:43:54 GMT+0000 (UTC)

@inventanew Seems like that file might not be in the right location?

From @mdhendri on Thu Mar 22 2018 05:09:01 GMT+0000 (UTC)

With the demo app I am getting the following error “This XML file does not appear to have any style information associated with it. The document tree is shown below.” Why is this happening? I am also seeing this with my local app. It seems like the URL may be miss formed.

From @jayair on Thu Mar 22 2018 17:08:13 GMT+0000 (UTC)

@mdhendri Which page of the demo app are you seeing this on - https://demo.serverless-stack.com?

From @mdhendri on Thu Mar 22 2018 17:15:44 GMT+0000 (UTC)

Yes, the issue was on https://demo.serverless-stack.com and also my own
app. It seems that if there was an image in the S3 bucket prior to the
switch to AWS Amplify somehow the URL got messed up and hence the error.
If I uploaded another image then it seemed to resolve itself. The
interesting thing is I tried it again this morning and I don’t get that XML
error.

On Thu, Mar 22, 2018 at 10:08 AM, Jay V notifications@github.com wrote:

@mdhendri https://github.com/mdhendri Which page of the demo app are
you seeing this on - https://demo.serverless-stack.com?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/AnomalyInnovations/serverless-stack-com/issues/54#issuecomment-375383851,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AASDy0AIURhvFRknobnL-m7dcw-_dEqXks5tg9p-gaJpZM4M4OMo
.

From @iggirex on Fri Mar 30 2018 19:06:02 GMT+0000 (UTC)

How does wrapping JSX html code inside curly braces work? This line:

{this.state.note &&
        <form onSubmit={this.handleSubmit}>

Doesn’t the && symbol make this a conditional statement? Wouldn’t it just return a boolean? The instructions say “We render our form only when this.state.note is available.” Is this the line that does that? How does && work here?

From @jayair on Fri Mar 30 2018 22:36:17 GMT+0000 (UTC)

@iggirex Yeah JSX is a bit confusing. One way to think about it is that React converts JSX into a set of standard JS calls to create components. In this case, if this.state.note is not null (or false), it’ll return the React component called form. If it’s null then it won’t render anything.

Here is some info on how false is rendered in JSX - https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator.

This link doesn’t go anywhere. I am getting this same error. http://localhost:3000/notes/undefined Network Error

edit…I figured it out, but now it is giving me No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

edit…So I downloaded a chrome extension that lets me get past No ‘Access-Control-Allow-Origin’ header is present on the requested resource, SO said it had something to do with local machine on browser conflict. But now when I click the link it is a blank container.

Any ideas?

This sounds like the API to get the note isn’t returning properly? Can you confirm this by adding a console.log for what it returns?

I’m currently getting an error when rendering the note page.

Error: Request failed with status code 500

I have made sure that my Note.js matches the tutorial.

My get.js in the back end correctly works when using the mock/get-event.json test.

Any idea why its not loading? It does load all the notes correctly on the index page.

Other items I’ve done to test:
Verified that the list functions work as expected
Updated get-event.json to use the notes created from the app, those return okay as well, so the API works with testing from other data as well… Really lost on this one.

Edit:
After much trial and error, soul searching, and meandering the internet, the issue existed within my serverless.yml file. The get function had a line; authorize: aws_iam instead of authorizer: aws_iam.

So there you have it! Hope this helps someone else.

Wow that’s unfortunate. I wish Lambda gave better error messages.

Hey there, hoping you might be able to help. As others have mentioned, the links in my note list are /undefined, and I’m getting a 500 error when clicking through. Console log is as follows:

index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Home`. 
    in withRouter(LinkContainer) (at Home.js:43)
    in Home (at Routes.js:14)
    in Route (at Routes.js:13)
    in Switch (at Routes.js:12)
    in Routes (at App.js:68)
    in div (at App.js:41)
    in App (at src/index.js:37)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:36)

So this warning is saying that the list of notes doesn’t have a unique id in this line:

It looks like the backend isn’t returning this properly. Check your API response and make sure that there is a noteId in it.