😍 useRef hook is used instead of direct DOM manipulation

aromalanil · Sep 5, 2020 · 6543f09 · 6543f09
1 parent 06d2ebb
commit 6543f09
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "markdown-editor",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "A react app to preview and edit Markdown",
   "private": true,
   "author": {

diff --git a/src/components/MarkdownEdit.jsx b/src/components/MarkdownEdit.jsx
@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState,useRef } from "react";
 import Snackbar from "@material-ui/core/Snackbar";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import placeholder from "../data/placeholder";
 
 function MarkdownEdit({ content, changeContent }) {
   const [open, setOpen] = useState(false);
+  const editorRef =useRef(null);
 
   useEffect(() => {
     if(content===''){
@@ -22,7 +23,7 @@ function MarkdownEdit({ content, changeContent }) {
 
   const handleClearButton = () => {
     changeContent("");
-    document.getElementById("editor").focus();
+    editorRef.current.focus();
   };
 
   const handleCopyButton = () => {
@@ -52,6 +53,7 @@ function MarkdownEdit({ content, changeContent }) {
         value={content}
         onChange={handleEditorChange}
         id="editor"
+        ref={editorRef}
       ></textarea>
 
       <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>