CreatePost component

import React from 'react';
import axios from 'axios';
import './CreatePost_style.css'

function CreatePost(props) {
    const create_post = async (event) => {
        event.preventDefault();

        const post_title = document.getElementById("post_title");
        const post_body = document.getElementById("post_body");

        if(post_title.value.length ===0 || post_body.value.length === 0){
            console.log("You have to set a title and a body!");

        }else{
            await axios.post(
              'http://127.0.0.1:8000/api/posts/',
              {
                  title: post_title.value,
                  body: post_body.value
            });

            props.get_posts();

            post_title.value = '';
            post_body.value = '';
        }
    };

    return (
        <form className="create_post_form">
            <input type="text" placeholder="Title" id='post_title'/>
            <textarea name="" cols="30" rows="10" placeholder="Message" id="post_body"/>
            <button onClick={create_post}>Send</button>
        </form>
    );
}

export default CreatePost;