© Copyright 2022 M.

Furqan - All rights

reserved.

The content in this book may not be reproduced,

duplicated, or transmitted without direct written
permission from the author or publisher.

Under no circumstance will any blame or legal

responsibility be held against the publisher, or
author, for any damages, reparation, or monetary
loss due to the information contained within this
book. Either directly or indirectly. You are responsible
for your own choices, actions, and results.

Legal Notice:

This book is copyright protected. This book is only for

personal use. You cannot amend, distribute, sell, use,
quote, or paraphrase any part, or the content within
this book, without the consent of the author or
publisher.

Disclaimer Notice:

Please note the information contained within this

document is for educational and entertainment
purposes only. All effort has been executed to present
accurate, Up to date, and reliable, complete
information. No warranties of any kind are declared
or implied. Readers acknowledge that the author is
not engaging in the rendering of legal, financial,
medical, or professional advice. Please consult a
licensed professional before attempting any
techniques outlined in this book.

By reading this document, the reader agrees that

under no circumstances is the author responsible for

any losses, direct or indirect, which are incurred as a

result of the use of the information contained within

this document, including, but not limited to errors,

omissions, inaccuracies .

OceanofPDF.com
useLocation Hook in React | Complete React Course Article
#59
iNotebook: Fetching Notes from Context | Complete React
Course Article #60
Notebook: Adding NoteItem in a Separate Note component |
Complete React Course Article #61
Creating Notes Component
Creating NoteItem Component
Adding Card to NoteItems
Adding font awesome icons to iNotebook | Complete React
Course Article #62
Getting Started - Fontawesome
Adding Font Awesome icons to iNotebook
Showing an Alert Message
Creating Alert Component
Adding AddNote component to iNotebook | Complete React
Course Article #63
Creating New Functions
Add a Note Function
Creating an Add Note Component
Assigning Function
handleClick function
Creating onChange Function
Adding "delete note" functionality to iNotebook | Complete
React Course Article #64
Assigning the deleteNote Function
Creating a deleteNote Function
Adding "fetch notes" functionality to iNotebook | Complete
React Course Article #65
 Creating an EditNote Function
Update Note API call
AddNote API call
CORS Express Package
Creating the Get Note Function
Using Get Notes Function
Adding a Modal for Editing Notes | Complete React Course
Article #66
Delete note API Call
Adding a Modal For Editing Notes
Creating an Update Note function
Adding the AddNote Form in the Modal
Enhancing the Edit Note Modal Form
Updating Notes on edit in the UI using React | Complete
React Course Article #67
Closing the Modal
Updating the Note
Fixing Errors
Updating the Note in the Frontend
Adding Frontend Validation + Few Fixes in iNotebook |
Complete React Course Article #68
No Notes to Display - Adding a Custom Message
Fixing Error - Unexpected Server Error
Enhancing the AddNote button
Fixing Issues - In NoteState.js
Enhancing the AddNote and UpdateNote form

OceanofPDF.com
useLocation Hook in React
| Complete React Course
Article #59
In the previous article, we have started working with the
context API in the iNotebook application. In this article, we
would be enhancing the iNotebook application and would be
learning about Location Hooks on the way and would be
learning about Location Hooks on the way. So, without
further ado let’s begin!
Getting Started
First of all, let’s refactor the code of NoteState.js and
noteContext.js files. IN the previous video, we have added a
state and an Update function to these files for the demo
purpose. Now, they are not required anymore so we can
remove the previous unnecessary code. We will be coming
on back to these files in the later articles.
Enhancing Navbar
We are changing the ‘‘title’’ and also the looks of the navbar
menu by adding a dark color to the Navbar. Make sure that
you have replaced the anchor tag with the link tag as we are
using react-router in this course.

Tip: Always try creating reusable components, so that you

can use a single component in different applications.
The Use location Hook
The Use location hook is a function that returns the location
object that contains information about the current URL.
Whenever the URL changes, a new location object will be
returned. We would be using this hook in our Navbar as
discussed below:
In Navbar.js

In the navbar, you might have spotted that the ‘Home’

section is always highlighted as compared to about. This is
so because the class of ‘Home’ is ‘active’. Now, we would
like to highlight that link of the navbar which is currently
surfed by the client. To do so, we would be using the React
Location Hook as mentioned below:
Applying the Use location Hook
First of all, we will import the use location hook in Navbar.js
and then will begin using this hook to highlight the active
link as shown below:

Figure 1.1: Applying the Use Location hook

Highlight Active Link
Now, you have understood that the React router has a hook
which can be very useful to know the current route. Here is
how the use location hook from react-router-dom comes to
the rescue.
Figure 1.2: Highlighting the Active link

Explanation: Above, we have used the location hook to

specify that whenever the location changes, then highlight
the active link according to ‘location.path’. Here, we have
made the class ‘Active’ only when the path is equal to ‘/’
and ‘/about’ for the Home and About section respectively.
Hence, we have successfully added the functionality of
highlighting the active link of the navbar with the interaction
of the user.
Enhancing the Home
Now, let’s begin enhancing the Home Page of our iNotebook
application as shown below:

Figure 1.3: Enhancing Home.js

Explanation: Above, We are adding a fascinating Heading,

such as “Add a Note”, in the body of the ‘Home’ menu page
of our iNotebook applicati

Our iNotebook: Here’s the look of our iNotebook

application, created till now:
Figure 1.4: iNotebook Application

So, here we complete the 59th article of this React series. In

the upcoming articles, we will be fetching, Adding, and
deleting Notes in the iNotebook application. In addition to
this, we would be understanding some new and awesome
concepts of React.

Thank you for being with me throughout the tutorial. In the

next tutorial we will be Fetching Notes from Context. Till
then, Keep learning and Keep Coding.

iNotebook: Fetching Notes

from Context | Complete
React Course Article #60
In the previous article, we learned how to apply the use
location hook in the iNotebook application for highlighting
the active link. In this article, we will be fetching all the
notes from the Context. To do so, we have to first pass the
notes from the backend of iNotebook in the created context,
in order to pass them to different components. So, without
further ado let’s begin:
Fetch All Notes Endpoint - Recall
If you remember, we have created the ‘fetchallNotes’
endpoint in the iNotebook thunder client collection, while we
were preparing the backend of the application. Hence, we
can make a request to the fetch All Notes endpoint, in order
to get the notes of a specific user as a response as shown
below-

Figure 1.1: Fetch All Notes Endpoint - Recall

Creating Context - In NoteState.js
At this moment, we will copy-paste the response notes in
the NoteState.js file (Our Context). Remember, here we are
hardcoding the notes in the application. However, In the
upcoming articles, we will be learning how to make an API
request to fetch the notes in the application.
Figure 1.2: Creating Context in NoteState.js

Explanation: In the above scenario, we have passed the

Notes and set notes parameter to the use State hook and
also we have set the initial value as Notes Initial, the
variable containing the fetched notes. After that, we have
exported the notes and the set notes with the help of the
Provider. Hence, we can use the ‘notes’ and ‘setNotes’ in
any component of the iNotebook application. In our case, we
will be using it at Home.js as discussed below.
Using Context - In Home.js
This time, we will be rendering the fetched notes from the
context in the ‘Your Notes’ section of the iNotebook
application in two steps as shown below:

Step 1: Setting Up UseContext Hook

Figure 1.3: Setting Up Use Context hook in Home

Explanation: First of all, we have imported the ‘usecontext’

hook and ‘noteContext’ file in the Home.js. As a result, we
are all set to apply ‘use context’ in the Home component.

Step 2: Using the Use Context Hook

Figure 1.4: Applying the Map method

Explanation: Here, we have used the destructuring

method of Javascript to obtain ‘notes’ and ‘SetNotes’ from
the Context. Finally, we will be using the map method in the
‘Your Notes’ section to return the notes Title as an array.

Result: Hence, we are getting the title of the note in the

‘your Notes’ section as shown below. This means that we
have successfully fetched the notes in the iNotebook
application.

Figure 1.5: Result

So, here we complete the 60th article of this React series. In

the upcoming articles, we will be adding and deleting Notes
in the iNotebook application. In addition to this, we will be
understanding some new and awesome concepts of React.

Thank you for being with me throughout the tutorial. In the

next tutorial we will be Adding NoteItem in a Separate Note
component. Till then, Keep learning and Keep Coding.

OceanofPDF.com
Notebook: Adding
NoteItem in a Separate
Note component |
Complete React Course
Article #61
In the last article, we understood how to fetch all the notes
from the context. For that purpose, we have added some
sample Notes from the backend in the created context. In
this article, we will be creating a separate "Notes"
component, which will contain all the note items. Doing this
will help us to manage the iNotebook application
effortlessly. So, without further ado let’s begin!
Creating Notes Component
Firstly, we will create a new component named Notes.js.
Inside this component, we will add the ‘Your Notes’ section
from the Home.js file as shown below:
Figure 1.1: Creating Notes component

Explanation: If you remember, in the previous article, we

have created the YourNotes section in Home.js. Here, we
have just copied the same section and have made a minor
change. In the above case, we are returning the ‘NoteItem’
component in the application. Remember, to pass the Note
Component in the Home.js file by using <Notes></Notes>.

Result: Hence, we have successfully added the ‘Your Notes’

section in a separate Note Component and have passed the
‘note’ prop to the NoteItem component.
Creating NoteItem Component
After performing the above step, let’s create a new
component named ‘NoteItem.js’ as shown below:
Figure 1.2: Creating NoteItem Component

Explanation: Inside the NoteItem component, we have

used the destructuring method of Javascript to extract the
required properties from the prop. After doing that, we have
returned the title and description of the Note to the
application.

Result: As a result, all the notes will be successfully

rendered in the iNotebook application. But now, we would
like to display the notes in a more structured way with the
help of the card components of Bootstrap. Let’s see how it is
done!

Adding Card to NoteItems

Inside NoteItem, first of all, we will add the card component
by adding the copied code from the bootstrap as shown
below:
Figure 1.3: Adding Card to NewsItem

Explanation: Above, we have made some changes to the

card components. Here, Instead of passing the random card
title and description, we have passed the note ‘title’ and
‘description’.
Result: Hence, we have successfully rendered all the notes
in a structured way in the iNotebook application as shown
below:

Figure 1.4: Result - iNotebook application

So, here we complete the 61st article of this React series. In

the upcoming articles, we will be using font awesome to add
the Delete and Edit button for notes in the iNotebook
application. In addition to this, we will be understanding
some more awesome concepts of React.

Thank you for being with me throughout the tutorial. In the

next tutorial we will be Adding font awesome icons to
iNotebook. Till then, Keep learning and Keep Coding.

OceanofPDF.com
Adding font awesome
icons to iNotebook |
Complete React Course
Article #62
In the previous article, we have created NoteItem in a
Separate Note component. In addition to this, we have
rendered the Notes inside the specific Bootstrap cards. As we
have discussed, structuring the iNotebook application in that
way helps in the proper management of the app. In this
article, we will be adding font Awesome icons to iNotebook.
So, without further ado let’s begin!
Getting Started - Fontawesome
Font Awesome is a web font used by website designers &
developers for icons instead of traditional old image icons.
It’s flexible in terms of coloring, sizing & stacking on top of
other background styles using plain CSS. First of all, we have
to sign up to font awesome and then log in to the dashboard
with the help of our Email and password. After doing this, we
will copy the code of the font awesome kit, available in the
dashboard. Finally, we would add the font awesome kit code
to the index.html file, available under the Public folder.
Adding Font Awesome icons to
iNotebook
After performing the above step, we can use the icons from
the font awesome by simply searching and selecting the
icon. In the end, we have to just copy the code provided for
that icon by font awesome and paste it in the desired place.
In our case, we want the Delete and Edit icon to be displayed
in NoteItem, therefore we will add the code of both icons as
shown below:

Figure 1.1: Adding the Delete and Edit Icons

Result: As a result, the delete and Edit icon are added

beside the heading of the Note as shown below:
Figure 1.2: Result - Adding the Delete and Edit Icons
Showing an Alert Message
Subsequently, we would like to add the functionality of
deleting the note whenever the client clicks on the delete
icon. But, before deleting the note we would like to show an
alert message to the client for his/her action. For that
purpose, we have to create an alert component in the
iNotebook application as discussed below:
Creating Alert Component
First of all, create a new component in the components folder
named Alert.js. Inside this component, we will add the
bootstrap code for the "Alert" component as shown below:
Figure 1.3: Creating Alert Component

Explanation: Here, we have also passed props to the alert

component. Remember to use this alert component in app.js
using <Alert/>. In addition to this, we would pass the
message from app.js as a prop. Please note that we would be
working with alert component in next article.
Result: Here’s the look at the iNotebook application. As you
can observe, we have successfully rendered the alert
message in the application.

Figure 1.4: Alert message - Result

So, here we complete the 62nd article of this React series. In

the upcoming articles, we will be adding the functionality of
deleting and editing the notes. In addition to this, we will be
understanding some more awesome concepts of React.

Thank you for being with me throughout the tutorial. In the

next tutorial we will be Adding AddNote component to
iNotebook. Till then, Keep learning and Keep Coding.

OceanofPDF.com
Adding AddNote
component to iNotebook |
Complete React Course
Article #63
In the previous article, we saw how to add an alert and
different icons in the iNotebook application with the help of
Font awesome. In this article, we would be making the icons
functional to perform their specific task. So, without further
ado let’s learn how it’s done!
Creating New Functions
In NoteState, we would be creating some new functions to
add, edit and delete the note as shown below:
Add a Note Function
Let’s begin with creating a new function to add a note to the
application. So, let’s open the NoteState.js context and
begin creating it as shown below:
Figure 1.1: Add a Note Function

Explanation: Here, we have used the arrow function with

the title, description and tag as parameters. For now, we
have made the note hardcoded because we aren’t making
the API calls at this very instance. After that, we have
concat the ‘note’ in the new Notes array, and have updated
the Note State. Hence, we have successfully created an Add
note function in the NoteState context.

Result: Finally, we have to get the Add note function from

the NoteState context in Notes.js with the help of the
destructuring method of javascript. As a result, we can call
the Add note function in Notes.js.
Creating an Add Note Component
Now, we will be creating a new component in the
components folder named AddNote.js, After that, we will
cut-paste the ‘Add Note’ container of Home.js in AddNote.js.
Basic Steps: First of all, we will import the note Context in
AddNote.js. Consequently, we would use the destructing
method to get the ‘AddNote’ function in the ‘AddNote.js’
component from the Context. Make sure to pass the
‘AddNote’ Component in Note.js by adding <AddNote/>.
Assigning Function
Now, we would be assigning the ‘handleClick’ function to
the onClick event of the button, which means that on
clicking the button the handleClick function will be invoked.
Thus, let’s begin creating the handleClick function as shown
below:
handleClick function
const [note, setNote] = useState({ title:
"", description: "", tag: "default" })
const handleClick = (e) => {
e.preventDefault();
addNote(note.title, note.description,
note.tag);
}

Explanation: here, we are giving the title, description and

tag value to the add note function. Also, we are using the
preventdefault() method to prevent the browser from
executing the default action of the selected element. Here,
we are using the useState hook in AddNote.js to change the
state of the Notes. In our case, the initial state of the Title
and the description is blank and the tag value is the default.
Creating onChange Function
The onchange event occurs when the value of an element
has been changed. Now, we would be assigning the
‘onChange’ function to the onChange event of the Title and
the description field, having type as text. However, to use
the ‘onchange’ function we have to first create it. Thus, let’s
create the On change function as shown below-

const onChange = (e) => {

setNote({ ...note, [e.target.name]:
e.target.value })
}

Explanation: Above, All the values inside the note object

will remain on executing the ‘onchange’ function. But, the
properties written after the note will be added or
overwritten. Consequently, we are using the target property
to change the name, that is ‘description’ text, to the value
of ‘onchange’. Remember, we are taking ‘e’ of the event as
a parameter.

Result: Now, we are adding and submitting some values in

the title and description field as a demo. As a result, We are
getting a new note, having those entries, being added in the
application as shown below:
Figure 1.2: Result - Note Successfully Added

So, here we complete the 63rd article of this React series. In

the upcoming articles, we will be adding the functionality of
deleting and editing the notes. In addition to this, we would
be understanding some more awesome concepts of React.

Thank you for being with me throughout the tutorial. In the

next tutorial we will be Adding "delete note" functionality to
iNotebook. Till then, Keep learning and Keep Coding.

OceanofPDF.com
Adding "delete note"
functionality to iNotebook
| Complete React Course
Article #64
Earlier, we understood how to add the feature of adding a
new note to the iNotebook application. In today’s article, we
will be creating and assigning a delete note function to
remove the existing note of the client from the iNotebook
application. So, without further ado let’s begin:
Assigning the deleteNote Function
At this moment, we will be adding the feature of deleting
the existing Note from the iNotebook by clicking the delete
icon, available beside the ‘Title’ text of the Note. To do so,
we will add an Onclick listener to the delete icon, available
in NoteItems.js. Here’s how it is done:
Figure 1.1: Assigning the deleteNote function

Explanation: Above, first of all, we have imported the note

context and useContext in NoteItem.js. After that, we are
taking deleteNote from the Context with the help of the
destructing method of Javascript. Consequently, we have
added the onClick listener and have provided it with the
delete Note function to delete the note by ID.
Creating a deleteNote Function
In noteState context, we will be creating the delete note
function as shown below:

Figure 1.2: Creating deleteNote function

Explanation: Above, we have used the filter method to

create a new array with all the elements that pass the test
successfully. In our case, if note.id is not equal to Id then it
will pass the test and would remain in the new notes.
Remember, we are just deleting the note on the client-side
only. However, we will be adding API calls, later on, to delete
the note in the backend of the iNotebook application.

Result: Now, we can successfully add and delete an

existing note from the client-side of the iNotebook
application. Here’s the look of the iNotebook application at
this point in time.
Figure 1.3: iNotebook application

So, here we complete the 64th article of this React course.

In the upcoming articles, we will be adding the functionality
of editing the notes. In addition to this, we will be adding,
Deleting, and Editing the note from the server-side of the
iNotebook application.

Thank you for being with me throughout the tutorial. In the

next tutorial we will be Adding "fetch notes" functionality to
iNotebook. Till then, Keep learning and Keep Coding.

OceanofPDF.com
Adding "fetch notes"
functionality to iNotebook
| Complete React Course
Article #65
In the previous article, we have added the functionality of
adding and deleting a Note from the frontend of the
iNotebook application. In today’s video, we will add the
functionality of Editing the note. In addition to this, we will
be adding the API calls to Add, Delete and edit the note in
the server-side of the iNotebook application. So, without
further ado let’s begin!
Creating an EditNote Function
First of all, we will create an Edit Note function in the
NoteState Context of the application. After that, we will be
able to use the EditNote function in different components.
Here’s how it is done:

Figure 1.1: Creating an EditNote function

Explanation: Here, we passed the id, title, description and
tag to the Edit Note arrow function as a parameter. After
that, we have used the ‘for loop’ to execute the block of
code until and unless a specific condition is true. In our
case, if element id is equal to an id then the ‘if’ Statement
will be executed.
Update Note API call
Now, we would like to make an API call to update notes in
the backend of the iNotebook application. To do so, we have
to use the fetch API as shown below:

Figure 1.2: UpdateNote API call

Explanation: Above, we are using the fetch API to make a
request to the server and make asynchronous HTTP
requests in the web browsers. Look at the points below to
have a better understanding of the above code.

First Parameter: As you can see, the first parameter of

the fetch function is the Update Note URL. The URL consists
of the host, endpoint and our NotesId.

Second Parameter: After that, the fetch takes a second

JSON object with options like method, headers, request
body, and so on. In our case, we have declared the method
as a ‘Post’ request and have passed the content type and
authoken in the header. Remember that the data will be an
object consisting of title, description and Tag.

Returning Response: Finally the response object from

Fetch will contain the information about the response object
itself. This includes headers, status codes, etc. We have
used the response.json() method to get the required data
from the response object.

Points to be Noted: Remember that we have also defined

a host variable, making the host as “https://localhost:5000”.
As you might have noticed, we are sending a hardcoded
authtoken at this very instance. However, in the upcoming
articles, we will be sending the authtoken by fetching it from
the backend.
AddNote API call
We will perform a similar procedure in the addNote API call.
The only difference is that we will be using the addNote API
instead of the updateNote as shown below:

Figure 1.3: Add Note API call

CORS Express Package

Now, we are getting an error as the access to fetch the API
from the https://localhost:3000 has been blocked by the
CORS policy. To resolve this issue, we have to install the
express cors package. We will be using the below command
to install the cors express package in the backend of the
iNotebook application.

npm install cors

After doing this, we will be using the CORS in the Index.js

file of the backend by using the below piece of code-

var cors = require('cors')

app.use(cors())
app.use(express.json())

Creating the Get Note Function

If you remember, we have hardcoded the notes in the
iNotebook application in the NotesInital variable. Now, we
will get all the Initial Notes with the help of Fetch API. To do
so, we have to first create a Get all note function as shown
below:
Figure 1.4: Creating Get All Notes Function

Explanation: Above, we have created the GetNotes

function, in a similar manner of creating the AddNote
function. Remember, that it doesn’t require any parameter
like title, description, or tag. In this scenario, we have made
an API call to fetch all notes from the backend. In this case,
we have declared the method as a GET request and have
passed the content type and authoken in the header. Finally,
we have set notes equal to the response JSON, that is the
notes that will be added to the iNotebook application.
Using Get Notes Function
In Notes.js, we will be getting the getNotes function as a
part of the Context. After that, we will be calling this
function in the use effect to fetch all notes as shown below.
Make sure to import the getNotes function from the
NoteState Context as a part of the value.

Result: Hence, we are getting the available two notes in

the iNotebook application. In addition to this, the notes are
also added in the iNotebook database of MongoDB as shown
below. This proves that the connectivity with the database is
working efficiently.
Figure 1.5: Notes Added to the Database

So, here we complete the 65th article of this React course.

In the upcoming articles, we will be adding the functionality
of deleting the notes from the database of the iNotebook
application. In addition to this, we would be adding the
functionality of editing the notes in the application.

Thank you for being with me throughout the tutorial. In the

next tutorial we will be Adding a Modal for Editing Notes. Till
then, Keep learning and Keep Coding.

OceanofPDF.com
Adding a Modal for Editing
Notes | Complete React
Course Article #66
In the previous article, we have added the functionality of
adding and updating a Note in the database of the
application with the help of API Calls. In today’s article, we
will be adding the functionality of deleting the note from the
database of the application. In addition to this we will add a
modal for editing the existing notes of the iNotebook
application. So, without further ado let’s begin!
Delete note API Call
In the previous article, we have made an AddNote, Fetching
all Note and Updating Note API call. In a similar manner, we
would be performing the deleteNote API call as shown
below. The only difference is that the Delete Note endpoint
URL is passed as the first parameter. Also, we are using the
delete method instead of ‘Get’ and ‘Post’ as shown below:

Figure 1.1: Delete Note Function

Result: Hence, we have successfully added the
functionality of deleting the note from the database of the
iNotebook application.
Adding a Modal For Editing Notes
Till now, we are able to fetch all the notes in the iNotebook
application. In addition to this, we are able to ‘Add’ and
‘Delete’ a Note from the frontend as well as the backend of
the iNotebook application. Now, our next step will be to add
an ‘edit a Note’ functionality to the application. To do so, we
will add a modal, which will be opened by clicking the edit
icon. The modal will contain a form, having all the details of
the specific Note, and we will be able to update the Note
easily by changing the values and clicking the Update
button.
Creating an Update Note function
In notes.js, First of all, we will create an Update Note
function, which will take ‘Note’ as a parameter. We would
like to invoke this function, whenever the client clicks on the
update icon. Thus, this update Note function is responsible
for rendering the modal of Bootstrap. Before that, let’s add
the code of the modal in the Notes.js by copy-pasting it from
the Bootstrap as shown below:
Figure 1.2: Creating an Update Note Function

Explanation: Here, we have made some desired changes

in the ‘Text’ and ‘Looks’ of the Modal component of the
Bootstrap. Remember, we are launching this modal with the
help of Javascript. Here, we are using the ‘useref’ hook of
React. As we have discussed earlier that it is a hook that
allows us to directly create a reference to the DOM element
in the functional component. In our case, we have provided
the reference to the Button of the Modal. Make sure to pass
the update note function as a prop to the NoteItem and
receive this function from the props, with the help of the
destructuring method of javascript, in the NoteItems.js.
Finally, we will assign this function to the ‘onClick’ event of
the Edit icon, available in NoteItem.js.

Result: Hence, the modal will be launched whenever the

client clicks on the Edit Icon as shown below-

Figure 1.3: Modal - Successfully Shown

Adding the AddNote Form in the
Modal
Subsequently, we would like to render the AddNote form, to
edit the values of the Note, in the Edit Modal. To do so, we
will copy-paste the AddNote form from the AddNote.js file.
However, we have made some changes in the ‘ID’ and
‘Name’ of the fields to avoid misconceptions.

Figure 1.4: Handle Click and OnChange Function

Explanation: Above, we are adding the ‘handle click’ and

‘Onchange’ function in the Notes.js for editing the values in
the fields of the form of Edit Note Modal. Here, we are also
using the UseState hook to set the initial value of Title,
Description, and Tag. The useState hook is a special function
that takes the initial state as an argument and returns an
array of two entries. If you remember, we have performed
similar steps while creating the AddNote Form previously.

Result: Hence, the AddNote form is being successfully

added to the Edit Note Modal as shown below -
Figure 1.5: Result - Form Added in the Modal
Enhancing the Edit Note Modal Form
Now, we would like to populate the Title, Description, and
Tag fields of the form with the values available in the Note.
To do so, we have to populate all the values whenever the
update Note Function is executed. Here’s the look of the
Update Note function-

Figure 1.6: Update Note function

Explanation: Above, we have enhanced the Update Note

function. Here, we have passed the current Note as a
parameter in the Update Note function and have used the
setNote() method. Thus, we have set the values of the
‘current note’ in the Fields of the Edit Modal Form. Make
sure to assign the values to all the fields of the Form,
available in Notes.js. Also, Assign the Handle Click function
to the Onclick event of the Update Note button of the Edit
Note Form.
Result: Now, the edit note modal contains the forms, which
have the existing values of the title, description and Tag
fields of the Note. Moreover, the ‘onchange’ is also working
efficiently, as we are able to change the values of the title,
description and tag fields of the Form. Most importantly, on
clicking the update note button, the handle Click function is
being successfully executed. Therefore, the updated Notes
are rendered as an object in the Console. However, the
Notes aren’t updated in the UI of the iNotebook application.

Figure 1.7: Result - Notes Rendered

So, here we complete the 66th article of this React course.

In the upcoming articles, we will be updating the Notes in
the UI (User Interface) of the iNotebook. In addition to this,
we will be fixing some errors in our application and will be
understanding some amazing concepts of React.
Thank you for being with me throughout the tutorial. In the
next tutorial we will be Updating Notes on edit in the UI
using React. Till then, Keep learning and Keep Coding.

OceanofPDF.com
Updating Notes on edit in
the UI using React |
Complete React Course
Article #67
In the previous article, we have added the functionality of
deleting the note from the database of the application. In
addition to this, we have also seen how to add a Modal for
Editing the existing notes of the iNotebook application. In
today’s article, we will be updating the note in the frontend
of the application, with the closing of the Edit Note Modal.
So, without further ado let’s begin!
Closing the Modal
First of all, we will add an ID of the Note in the useState
hook, created in Notes.js. In addition to this, we would like
to set the ID as the current note ID while invoking the
"updateNote" function. Consequently, we would like to close
the modal after updating the note, that is after the
execution of the handle click function. To do that, we have
to add logic to click on the ‘close’ button. We can do so with
the help of the ‘Useref’ hook of React.
Figure 1.1: Closing the Modal

Explanation: Here, we have created a new ‘Useref’ named

‘refClose’ and have also added the logic in the handle click
function to click on the button having refClose as a
reference. Remember that we have provided the Close
reference to the close button, as we have done previously
with the launch Modal button. As a result, on clicking the
update Note button of the Modal, the Modal suddenly
disappears.
Updating the Note
Now, we would like to update the Note in the Frontend and
Backend of the iNotebook application. To do that, follow the
procedure mentioned below:

Figure 1.2: Updating the Notes

Explanation: Here, we will first get the edit Note function

from the NoteState context with the help of the
destructuring method. Now, when the user clicks on the
update Note button of the modal then we would like to
execute the ‘edit note’ function before the closing of the
modal. Remember that the edit Note takes ID, Title,
description, and tag as a parameter.
Fixing Errors
Subsequently, we are getting some errors in the console of
the iNotebook application. In NoteState.js, We have
assigned the value to ‘response’ and ‘JSON’ but we have
never used them. Moreover, we have to use the ‘PUT’
method instead of the ‘POST’ request in the Edit Note
function.
Result: Hence, we can easily add and update the note in the
backend of the application.
Updating the Note in the Frontend
Till now, we are able to update the existing note in the
backend of the application. However, we would also like to
update the note in the front end of the iNotebook
application. To do that, we will replace the ‘element’ with
‘newNotes[index]’, in the logic of editing the note on the
client-side as shown below:

Figure 1.3: Updating the Note in the Frontend

Explanation: After executing the loop, we have made an
exit from the loop with the help of the ‘break’ method. In
addition to this, we have created a ‘New Notes’ variable to
stringify the notes array. Remember that we have wrapped
this logic in the JSON.parsed to create its deep copy. In the
end, we have set the state of the notes as new notes.

Result: Hence, we are able to edit and update the note in

the backend as well as frontend of the application. Here’s
the example, we have updated the title and description of
all notes as shown below:

Figure 1.4: Result - Notes Updated

So, here we complete the 67th article of this React course.

In the upcoming articles, we will be adding some functional
alerts to the iNotebook application. In addition to this, we
will be fixing some errors in our application and will be
understanding some amazing concepts of React.

Thank you for being with me throughout the tutorial. In the

next tutorial we will be Adding Frontend Validation and make
Few Fixes in iNotebook. Till then, Keep learning and Keep
Coding.
OceanofPDF.com
Adding Frontend
Validation + Few Fixes in
iNotebook | Complete
React Course Article #68
In the previous article, we have seen how to add, update
and delete a Note from the Frontend as well as the backend
of the iNotebook application. In today’s article, we will be
fixing some issues in our iNotebook application. In addition
to this, we will be adding a Frontend User Validation to grant
access to only authorized users. So, without further ado let’s
dive into it!
No Notes to Display - Adding a
Custom Message
At this moment, we have deleted all the notes from our
application. Now, we would like to show a custom message
to the client if no notes are available. Here, we will add the
logic to show a custom message to the client if the length of
the notes is 0 as shown below:

Figure 1.1: Adding a Custom Message

Result: Hence, the custom message will be shown to the

client when no notes are available in the application.
Fixing Error - Unexpected Server
Error
While updating the note, we have met with an unexpected
server error. On notice, we have found out that to fix this
issue we have to add min length in all the fields of the Note.
Therefore, in notes.js, we will begin editing all the inputs of
the form as shown below:

Figure 1.2: Setting the Min Length

Explanation: Here, we have set all the input fields as

required, which means that it is compulsory for the client to
fill values to the Title and Description field. In addition to
this, we have added min length as ‘5’ to all the fields.
Remember to perform the same procedure in the form of
AddNote.js.
Enhancing the AddNote button
At this instance, the add note button is functional, even if no
values are entered in the field. To overcome this issue, we
will disable the Add Note button as shown below:

<button disabled={note.title.length<5 ||
note.description.length<5} type="submit"
className="btn btn-primary" onClick=
{handleClick}>Add Note</button>
Explanation: Here, we have added the disabled event
listener on the AddNote Button. This means that when the
length of the title or description is less than 5, then make
the AddNote button disabled. Remember to perform this
procedure in the Update note button of the Edit Note Modal.
Fixing Issues - In NoteState.js
If you remember, we have created a note function in our
NoteState context. Now, this note function is causing trouble
in the iNotebook application as we have provided a hard-
coded note in it. Instead of this, we need to pass the note,
which is returned by the JSON. Hence, we have updated the
function and thus our application is working magnificently.
Result: Hence, the new notes can be added and updated in
the iNotebook application without any errors.
Enhancing the AddNote and
UpdateNote form
We are facing a minor issue in the form, that is once the
note is added or updated in the iNotebook application then
the values are still shown in the fields. This isn’t an error,
but it destroys the user interface in our beloved application.
Therefore, we would like to empty all the fields after adding
or updating the note. Here’s how we can do that:

Figure 1.3: Enhancing the AddNote and UpdateNote form

Explanation: Now, once the note is updated by executing

the ‘Handleclick’ function then we would like to set the title,
description, and tag field as empty. Hence, after adding or
updating a note, the fields automatically get empty and
thus provide a spectacular interface.

So, here we complete the 68th article of this React course.

In the upcoming articles, we will be adding some functional
alerts to the iNotebook application. In addition to this, we
will be creating a login and sign-up component for our
iNotebook application.

Thank you for being with me throughout the tutorial. In the

next tutorial we will be Adding Login Component to
iNotebook. Till then, Keep learning and Keep Coding.

OceanofPDF.com