Scribd
Upload
2 views13 pages

Full Stack Development Part 2

The document outlines how to use React to create forms for user data input, including sending this data to a Node.js back-end using fetch and the POST method. It describes how to update and delete user data in MongoDB through React requests and how to display user data by fetching it from the back-end. Key methods such as setName, handleSubmit, PUT, and findOneAndUpdate are highlighted for managing user data effectively.

Uploaded by

Mohammad Khan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views13 pages

Full Stack Development Part 2

The document outlines how to use React to create forms for user data input, including sending this data to a Node.js back-end using fetch and the POST method. It describes how to update and delete user data in MongoDB through React requests and how to display user data by fetching it from the back-end. Key methods such as setName, handleSubmit, PUT, and findOneAndUpdate are highlighted for managing user data effectively.

Uploaded by

Mohammad Khan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

React - Taking Data from User

● React helps us create forms to take data from users.


● We use the <input> element to collect information
like name, email, etc.

Arsalan Khan
● The form takes the user’s name.
● setName updates the value, and handleSubmit
handles form submission.

Arsalan Khan
Sending User Data to
Back-End (React to [Link])
● Once the user submits data, we need to send it to
the back-end ([Link]).
● fetch sends the user’s name to the back-end API.
● The POST method is used to send data.

Arsalan Khan
Back-End ([Link]) - Receiving
and Storing Data in MongoDB
● The back-end needs to receive the data and store it
in a database.
● We use MongoDB for storing user information.

Arsalan Khan
5

Arsalan Khan
React - Updating Existing User
Data
● To update a user’s data, we need another form in
React.
● We use the PUT method to tell the back-end we
want to update the user’s name.

Arsalan Khan
7

Arsalan Khan
Back-End ([Link]) - Updating
Data in MongoDB
● The back-end needs to update the data in MongoDB
when React sends the request.
● findOneAndUpdate finds the old name and updates
it with the new one.
● [Link] is the new name sent from
React.

Arsalan Khan
React - Deleting User Data
● We can delete a user by sending a delete request
from React.

Arsalan Khan
Back-End ([Link]) - Deleting
Data in MongoDB
● The back-end needs to delete the user data in
MongoDB.

10

Arsalan Khan
React - Displaying User Data
(Fetching Data)
● To display data from the back-end, React can fetch
the data and show it.

11

Arsalan Khan
12

Arsalan Khan
Back-End ([Link]) - Sending
Data to React
● The back-end sends the list of users to the front-end.
● User.find() fetches all users from MongoDB and
sends them to React.

13

Arsalan Khan

You might also like