Render the Note Form

#1

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

0 Likes

#2

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.

0 Likes

#3

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.

0 Likes

#4

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.

0 Likes

#5

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.

0 Likes

#6

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)
0 Likes

#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

0 Likes

#8

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

0 Likes

#9

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?

0 Likes

#10

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.

0 Likes

#11

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?

0 Likes

#12

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
.

0 Likes

#13

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?

0 Likes

#14

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.

0 Likes

#15

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?

0 Likes

#18

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?

0 Likes