DEV Community

Anil
Anil

Posted on

How to use of post method in react js

This code is a React component that renders a form for creating a new post. Here's a detailed description of the code:

Imports

  1. React: Importing React to use JSX and other React functionalities.
  2. axios: Importing Axios for making HTTP requests. 
import React from "react";
import axios from "axios";

export default function Create() {
  const submitHandler = (event) => {
    event.preventDefault();
    const title = event.target.title.value;
    const body = event.target.body.value;
    const author = event.target.author.value;
    const data = { title, body, author };
    axios
      .post("url", data)
      .then((response) => {
        console.log(response);
        event.target.reset();
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <>
      <div className="container">
        <div className="row">
          <div className="col-lg-8 col-md-10 mx-auto">
            <p>Create a post......?</p>
            <form
              className="sentMessage"
              id="contactForm"
              onSubmit={submitHandler}
            >
              <div className="control-group">
                <div className="form-group floating-label-form-group controls">
                  <label>Title</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Title"
                    id="title"
                    required
                    name="title"
                  />
                  <p className="help-block text-danger"></p>
                </div>
              </div>
              <div className="control-group">
                <div className="form-group floating-label-form-group controls mt-3">
                  <label>Body</label>
                  <textarea
                    id="body"
                    className="form-control"
                    name="body"
                    placeholder="Body"
                  ></textarea>
                  <p className="help-block text-danger"></p>
                </div>
              </div>
              <div className="control-group">
                <div className="form-group floating-label-form-group controls mt-3">
                  <label>Author</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Author"
                    id="author"
                    required
                    name="author"
                  />
                  <p className="help-block text-danger"></p>
                </div>
              </div>
              <br />
              <div id="success"></div>
              <button
                type="submit"
                className="btn btn-primary"
                id="sendMessageButton"
              >
                Send
              </button>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Function Component: Create

The component is defined as a function named Create.

submitHandler Function

  • Purpose: This function handles the form submission.
  • Parameters: Takes an event object as a parameter.
  • Functionality:
    • Prevents the default form submission behavior using event.preventDefault().
    • Retrieves the values from the form fields (title, body, and author).
    • Constructs a data object with these values.
    • Makes a POST request to a specified URL using Axios, sending the data object.
    • If the request is successful, logs the response and resets the form fields.
    • If the request fails, logs the error.

JSX Structure

The component returns a JSX fragment (<>...</>) containing the following elements:

  • Container Div: A div with the class container to contain the form.
  • Row Div: A div with the class row to structure the layout.
  • Column Div: A div with classes col-lg-8, col-md-10, and mx-auto to center the form within the container.
  • Paragraph: A paragraph element with the text "Create a post......?".
  • Form: A form element with:
    • Class sentMessage
    • ID contactForm
    • onSubmit handler set to submitHandler

Form Fields

The form contains three input fields and a submit button:

  1. Title Input:

    • Type: text
    • Class: form-control
    • Placeholder: "Title"
    • ID: title
    • Required: true
    • Name: title

  2. Body Textarea:

    • Class: form-control
    • Placeholder: "Body"
    • ID: body
    • Name: body

  3. Author Input:

    • Type: text
    • Class: form-control
    • Placeholder: "Author"
    • ID: author
    • Required: true
    • Name: author

  4. Submit Button:

    • Type: submit
    • Class: btn btn-primary
    • ID: sendMessageButton
    • Text: "Send"

Summary

This React component provides a form for creating a post with a title, body, and author. When the form is submitted, the submitHandler function collects the input data and sends it to a specified URL using Axios. If the submission is successful, the form is reset; otherwise, any errors are logged to the console.

Top comments (0)

Read next

peterlidee profile image

4. Testing (async) searchParams with Jest in Next 15

Peter Jacxsens -

innovative-insight profile image

How Does Cloud Computing Help in Scaling Applications Efficiently?

Innovative Insight -

herjean7 profile image

Integrating MongoDB Atlas Alerts with Lark Custom Bot via AWS Lambda

Hejun Wong -

cicubeteam profile image

Docker Swarm vs Kubernetes - A Deep Technical Analysis

CiCube -