React Nwetter - nweet.js

import React, { useState } from "react";
import { dbService, storageService } from "myBase";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash, faPencilAlt } from "@fortawesome/free-solid-svg-icons";

const Nweet = ({ nweetObj, isOwner }) => {
const [editing, setEditing] = useState(false);
const [newNweet, setNewNweet] = useState(nweetObj.text);
const onDeleteClick = async () => {
const ok = window.confirm("Are you sure you want to delete this nweet?");
if (ok) {
await dbService.doc(nweets/${nweetObj.id}).delete();
await storageService.refFromURL(nweetObj.attachmentUrl).delete();
}
};
const toggleEditing = () => setEditing((prev) => !prev);
const onSubmit = async (event) => {
event.preventDefault();
await dbService.doc(nweets/${nweetObj.id}).update({
text: newNweet,
});
setEditing(false);
};
const onChange = (event) => {
const {
target: { value },
} = event;
setNewNweet(value);
};
return (

<div className="nweet">
  {editing ? (
    <>
      <form onSubmit={onSubmit} className="container nweetEdit">
        <input
          type="text"
          placeholder="Edit your nweet"
          value={newNweet}
          required
          autoFocus
          onChange={onChange}
          className="formInput"
        />
        <input type="submit" value="Update Nweet" className="formBtn" />
      </form>
      <span onClick={toggleEditing} className="formBtn cancelBtn">
        Cancel
      </span>
    </>
  ) : (
    <>
      <h4>{nweetObj.text}</h4>
      {nweetObj.attachmentUrl && <img src={nweetObj.attachmentUrl} />}
      {isOwner && (
        <div class="nweet__actions">
          <span onClick={onDeleteClick}>
            <FontAwesomeIcon icon={faTrash} />
          </span>
          <span onClick={toggleEditing}>
            <FontAwesomeIcon icon={faPencilAlt} />
          </span>
        </div>
      )}
    </>
  )}
</div>

);
};

export default Nweet;

트윗기능 구현 텍스트를 적어 트윗할 경우 firebase 스토리지에 데이터 전송
리얼타임으로 작동 트윗 삭제 수정 컴포넌트