'dataURI' variable from inside React Hook useEffect will be lost after each render

Question

I would like to translate the function below written in vanilla javascript to a react function. The function below allows a user to click on the image input and append the image to the textarea which holds a class ".editor"

 function getImage() {
      var file = document.querySelector("input[type=file]").files[0];

      var reader = new FileReader();

      let dataURI;

      reader.addEventListener(
        "load",
        function() {
          dataURI = reader.result;

          const img = document.createElement("img");
          img.src = dataURI;
          document.querySelector(".editor").appendChild(img);
        },
        false
      );

      if (file) {
        console.log("s");
        reader.readAsDataURL(file);
      }
    }

This is what i done so far in my react component... I'm receiving the following error message(s)

TypeError: editor.push is not a function

Tools.js component:

function Toolbar() {
    const dispatch = useDispatch();

    let inputRef = useRef(null);
    const editor = useRef(null);
    const [selectedFile, setSelectedFile] = useState(null);

    const imgChangeHandler = e => {

        e.preventDefault();
        setSelectedFile(e.target.files[0]);

        let reader = new FileReader();
        let dataURI = reader.result;

        const img = React.createElement("img",{src: dataURI});
        editor.push(img);

        if(selectedFile) {
            console.log("s");
            reader.readAsDataURL(selectedFile)
        }
    };

Editor.js component:

 <>
            <div className="center">
               <div className="editor" ref={editor} style={editor} contentEditable={true} suppressContentEditableWarning={true}>
                   <h1>{introText}</h1>
                   <p>{subText}</p>
               </div>
            </div>
        </>

can you show your whole render function ?, what the editor variable refers too — Ahmed Khattab, Mar 25 '20 at 22:05
editor is referencing a div with the ref editor in my editor component. Ive included the full function and the div being referenced. — user3574939, Mar 25 '20 at 22:11

Ahmed Khattab · Answer 1 · 2020-03-26T06:42:03.293

dont

editor.push(img);

do

editor.current.push(img);

as to the react doc says

Essentially, useRef is like a “box” that can hold a mutable value in its .current property.

you need to use the .current attribuite on the ref

in the parent component that is containing the Editor.js and the Toolbar.js components, the ref variable should be there, like so

import Toolbar from "./toolbar.js"
import Editor from "./editor.js"

const parent = () => {
  const editorRef = useRef(null);

  /// other code for your component 

  return (
      <div>
          <Editor
            // other props
            editorRef = {editorRef}
            />
          <Toolbar  
            // other props
            editor= {editorRef}
          />
      </div>
   );


}

and in the Editor.js file do this

Editor.js


const editorComponent = props => {

    // some other code

   return (
       <div ref={props.editorRef}> // will be available because we are passing it 
                                   // in the parent component
       </div>

    );
}

and now in your

Toolbar.js you can access the editor prop this way.

props.editor

this will work because the editor is being stored in the component that contains both Toolbar and Editor components.

when i add ref={editor} to my div. I receive an error "editor" is not defined. This is happening because my function is in my Toolbar.js component while the div with reference ref={editor} is in my Editor.js component. How can i update my code so that editor is global and accessible in both components? — user3574939, Mar 25 '20 at 22:27
well, you need to store the ref for the editor in the component that contains both the editor and the tollbarjs — Ahmed Khattab, Mar 26 '20 at 06:34
I updated the code. i am now receiving props.editorRef.current.push is not a function — user3574939, Mar 27 '20 at 04:26

'dataURI' variable from inside React Hook useEffect will be lost after each render

1 Answers1