PostCreate component

import React from 'react';
import axios from "axios";

function PostCreate(props) {

    const send_post_action = async (event) => {
        event.preventDefault();

        const title_field = document.getElementById("title_field");
        const body_field = document.getElementById("body_field");

        if(title_field.value.length === 0){
            console.log("Title is required");
            return;
        }

        if(body_field.value.length === 0){
            console.log("Body is required");
            return;
        }

        await axios({
            method: "post",
            url: "http://127.0.0.1:8000/api/posts/",
            data: {
                title: title_field.value,
                body: body_field.value
            }
        });

        props.refresh_posts();
        title_field.value = "";
        body_field.value = "";
    };

    return (
        <form className="post_card create_form">
            <input type="text" id="title_field" placeholder="Title" className="post_title"/>
            <textarea name="" id="body_field" cols="30" rows="4" placeholder="Body"/>

            <button onClick={send_post_action}>Send</button>
        </form>
    );
}

export default PostCreate;