# Add the Create Note Page

**URL:** <https://discourse.sst.dev/t/add-the-create-note-page/107>\
**Category:** Chapter Comments\
**Created:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107 "2018-05-09T19:18:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/1 "2018-05-09T19:18:47Z")

</div>

_From @jayair on Mon Apr 10 2017 01:05:29 GMT+0000 (UTC)_  
  
Link to chapter - [http://serverless-stack.com/chapters/add-the-create-note-page.html](http://serverless-stack.com/chapters/add-the-create-note-page.html)  
  
_Copied from original issue: [https://github.com/AnomalyInnovations/serverless-stack-com/issues/47](https://github.com/AnomalyInnovations/serverless-stack-com/issues/47)_

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/2 "2018-05-09T19:18:48Z")

</div>

_From @ScottMTravers on Tue May 02 2017 17:48:44 GMT+0000 (UTC)_  
  
I’m having an issue updating the disable attribute to ‘false’ on the ‘create’ button once I type in a few characters into the text field or upload a file. My NewNote.js is identical to the one in the tutorial. I’ve tried multiple times going through the tutorial steps after resetting to a past commit, but to no avail.

Here’s a couple screenshots (First - no text, Second - test note):

 ![no-content](https://yyz2.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/3e9ed4a5b509b0471a0eecf00aba721762a6d830.png)  
 ![content](https://yyz2.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/5ae9f9dabd2943195ecda12c2d6d5edf4e932ea3.png)

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/3 "2018-05-09T19:18:48Z")

</div>

_From @jayair on Wed May 03 2017 00:28:58 GMT+0000 (UTC)_  
  
@ScottMTravers just to make sure, are there any errors that are showing up in the browser console? Also, what browser & OS combo are you on?

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/4 "2018-05-09T19:18:49Z")

</div>

_From @ScottMTravers on Wed May 03 2017 00:52:02 GMT+0000 (UTC)_  
  
Using Chrome & Mac OSX 10.11.

Here’s the error showing up in my console:  
**Uncaught Error: addComponentAsRefTo(…): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component’s `render` method, or you have multiple copies of React loaded (details: [https://fb.me/react-refs-must-have-owner](https://fb.me/react-refs-must-have-owner)).**

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/5 "2018-05-09T19:18:49Z")

</div>

_From @ScottMTravers on Wed May 03 2017 17:01:40 GMT+0000 (UTC)_  
  
Fixed the issue.

My notes-app-client was located inside the root directory of my notes-app-api instead of a separate project folder.

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/6 "2018-05-09T19:18:49Z")

</div>

_From @jayair on Wed May 03 2017 19:41:49 GMT+0000 (UTC)_  
  
@ScottMTravers Oh! It’s a bit of a gotcha. We should make that clear when we start the frontend portion. Thanks for reporting back.

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/7 "2018-05-09T19:18:50Z")

</div>

_From @walshe on Thu Mar 01 2018 18:12:27 GMT+0000 (UTC)_  
  
why does handleSubmit need event.preventDefault ? isnt it only a regular button action that needs this really ?

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/8 "2018-05-09T19:18:50Z")

</div>

_From @jayair on Thu Mar 01 2018 20:52:21 GMT+0000 (UTC)_  
  
@walshe In this case it is a submit button. You could skip it. But if you had another field that you could “enter” to submit then you’ll need it.

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/9 "2018-05-09T19:18:50Z")

</div>

_From @nuyulcore on Wed Mar 28 2018 13:01:12 GMT+0000 (UTC)_

 ![screen shot 2018-03-28 at 20 00 44](https://yyz2.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/3f866a307fe99becb0e85a17a097e90bc77f1a0f.png)  
Hello, I got this error, when I try to post my notes.

---

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 7:18pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/10 "2018-05-09T19:18:51Z")

</div>

_From @jayair on Wed Mar 28 2018 15:12:59 GMT+0000 (UTC)_  
  
@mbahfauz Are you logged in?

---

<div class="post-metadata">

**Author:** ![edi.konfetti](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/edi.konfetti/32/189_2.png) [@edi.konfetti](https://discourse.sst.dev/u/edi.konfetti)\
**Post date:** [July 11, 2018, 4:28pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/11 "2018-07-11T16:28:36Z")

</div>

Thanks so much for this amazing tutorial. I’m new to JavaScript and React and I’ve already learned a ton. Love your attention to detail and to getting a real-world example up and running as opposed to only creating toy projects.

I’d like to propose a small improvement for NewNote.js. I’d suggest replacing…

```
alert("Please pick a file smaller than 5MB");

```

with…

```
alert(`Please pick a file smaller than ${config.MAX_ATTACHMENT_SIZE/1000000} MB.`);

```

That way our maximum attachment size alert dialogue will directly represent the file size limit that’s been set in config.js. So if we decide to change it later, all we need to adjust is the MAX\_ATTACHMENT\_SIZE value in config.js.

Does that make sense?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [July 16, 2018, 1:15am UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/12 "2018-07-16T01:15:37Z")

</div>

Ah good catch. Thanks for the heads up.

---

<div class="post-metadata">

**Author:** ![Manu66](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/manu66/32/193_2.png) [@Manu66](https://discourse.sst.dev/u/Manu66)\
**Post date:** [July 19, 2018, 7:17pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/13 "2018-07-19T19:17:16Z")

</div>

Hi, I got stuck at the create note step.  
When I submit the form I get this error in the console:

`Failed to load https://xxx.execute-api.us-east-1.amazonaws.com/dev/notes: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access. The response had HTTP status code 403.`

If I inspect the request, I can see that the response is “Missing Authentication Token”.

I think the problem is that I don’t want authenticated users to save notes.  
How can I make it so everyone can create a note, without being logged in?

Thanks!

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [July 21, 2018, 10:03pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/14 "2018-07-21T22:03:18Z")

</div>

Answering your other thread.

---

<div class="post-metadata">

**Author:** ![serverless-js](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@serverless-js](https://discourse.sst.dev/u/serverless-js)\
**Post date:** [October 18, 2018, 6:59pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/15 "2018-10-18T18:59:14Z")

</div>

I’ve created the projects twice and reviewed every line of code many times over. However, I am constantly hitting a network error when trying to create the note in the react app. Creating through terminal works fine and Dynamo has my notes. When viewing the js console, it reports 3 403 errors (attached) but I can not find anything different in my code, other than calling it todo instead of note. All my yml functions have cors: true and the response-lib.js has the headers:

```auto
“Access-Control-Allow-Origin”: “*”,
“Access-Control-Allow-Credentials”: true

```

as specified. Can anyone help?

 ![03%20PM](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/aa340558636456956c10a0fd1a2c389f1c436515.png)

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [October 18, 2018, 7:54pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/16 "2018-10-18T19:54:06Z")

</div>

Just replying here in case, have you added it to your Identity Pool IAM?

```auto
    {
      "Effect": "Allow",
      "Action": [
        "execute-api:Invoke"
      ],
      "Resource": [
        "arn:aws:execute-api:YOUR_API_GATEWAY_REGION:*:YOUR_API_GATEWAY_ID/*/*/*"
      ]
    }

```

> **[Create a Cognito Identity Pool](https://serverless-stack.com/chapters/create-a-cognito-identity-pool.html)**
>
> Amazon Cognito Federated Identities helps us secure our AWS resources. We can use the Cognito User Pool as an identity provider for our serverless backend. To allow users to be able to upload files to our S3 bucket and connect to API Gateway we need...

---

<div class="post-metadata">

**Author:** ![serverless-js](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@serverless-js](https://discourse.sst.dev/u/serverless-js)\
**Post date:** [October 18, 2018, 8:22pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/17 "2018-10-18T20:22:50Z")

</div>

Thanks for the reply, and love the tutorial and community! That helped track it down. I was focused on the code and not the policy. I had an extra character in the gateway ID.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [October 28, 2018, 1:50am UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/18 "2018-10-28T01:50:40Z")

</div>

Glad you figure it out!

---

<div class="post-metadata">

**Author:** ![mikebenson](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/mikebenson/32/297_2.png) [@mikebenson](https://discourse.sst.dev/u/mikebenson)\
**Post date:** [October 28, 2018, 7:15pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/19 "2018-10-28T19:15:33Z")

</div>

Authenticated and Unauthenticated Routes. I’m assuming those are associated with the Authenticated and Unauthenticated Groups. My question is, is there a way to implement Groups within Cognito that are linked to routes directly or indirectly? Could this be something that goes into extra credit?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [October 30, 2018, 9:00pm UTC](https://discourse.sst.dev/t/add-the-create-note-page/107/20 "2018-10-30T21:00:17Z")

</div>

Hmm this might be bad naming but they aren’t related. The routes we created are just for convenience. I’m not entirely sure if we can create ones that are linked somehow. I’d have to look into it.

[Next page](https://discourse.sst.dev/t/add-the-create-note-page/107.md?page=2)
