Post component with edit

import React, {useState, useEffect} from 'react';
import axios from 'axios';

function Post(props) {
    const {id, title, body, created} = props.post_data;
    const {refresh_posts} = props;

    const [edit_mode, set_edit_mode] = useState(false);

    const edit_post_action = () => {
        set_edit_mode(true);
    };

    const cancel_edit_action = () => {
        set_edit_mode(false);
    };

    const save_action = async () => {
        const fields = get_fields();

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

        refresh_posts();
        set_edit_mode(false);
    };

    const get_fields = () => {
        const post_title_field = document.getElementById(`post_title_field_${id}`);
        const post_body_field = document.getElementById(`post_body_field_${id}`);

        return {
            "title_field": post_title_field,
            "body_field": post_body_field,
        }
    };

    useEffect(() => {
        if(edit_mode){
            const fields = get_fields();

            fields.title_field.value = title;
            fields.body_field.value = body;
        }
    }, [edit_mode]);

    const delete_post_action = async () => {
        await axios({
            method: "delete",
            url: `http://127.0.0.1:8000/api/posts/${id}/`
        });

        refresh_posts();
    };

    return (
        <div className="post_card">
            <div className="post_card_header">
                {edit_mode ?
                    <input type="text" id={`post_title_field_${id}`}/>
                    :
                    <h2>{title}</h2>
                }
            </div>

            <div className="post_body">
                {edit_mode ?
                    <textarea name="" id={`post_body_field_${id}`} cols="30" rows="3"/>
                    :
                    <div>{body}</div>
                }
            </div>

            <div className="post_card_footer">
                <div>{created}</div>

                {edit_mode ?
                    <div>
                        <i className="fas fa-window-close" onClick={cancel_edit_action}/>
                        <i className="fas fa-save" onClick={save_action}/>
                    </div>
                    :
                    <div>
                        <i className="fas fa-edit" onClick={edit_post_action}/>
                        <i className="fas fa-trash-alt" onClick={delete_post_action}/>
                    </div>
                }




            </div>
        </div>
    );
}

export default Post;