codedamn-classrooms / react-json-server

Lab Exercise: Create a Component Which Takes User Input and Performs a POST Request to an API 📝🌐

Objectives 🎯

In this task, we will create a React component that takes user input and makes a POST request to an API. This will help you understand how to interact with APIs using React.

Prerequisites 🧐

You should have a basic understanding of JavaScript, React, and familiarity with fetch API or axios for making HTTP requests.

Steps 🚀

0. Start the server: Run the following command in your terminal to start the server. This will allow you to make requests to the API.

   yarn dev:server

   This will start a server on port 1338. You can access it via http://localhost:1338/.

1. Create a Submit Method: Write a method that makes a POST request to the API with the user's input when a submit button is clicked.

2. Handle API Response: Update the state with the API response and handle any errors that may occur during the request.

3. Display User Input and API Response: Display the user's input and the API response on your component to verify everything is working correctly.

Outcome 🏁

By the end of this task, you will have a functional React component that takes user input, makes a POST request to an API, and handles the response. This is a vital skill in creating dynamic and interactive web applications.