0

i have defined an image in spinner.js like so:

 import React from 'react';
import broomAndText from './mygif.gif';


function myGif() {
    return <img src={broomAndText} alt="broomAndText" width="200px" height="200px" />
}

export default myGif;

i then want to call the image, and display it on page in my mainPage.js. Here's how I am trying to call it:

    import myGif from './spinner'
var regData = ""
firestore.collection("profiledata").doc(user.uid).get().then((doc) => { 


      var firstName = doc.data().firstname;
      var lastName = doc.data().lastname;
      var companyName = doc.data().companyname;
      var email = doc.data().email;
      console.log(doc.data().registeringFlag); 
      regData = doc.data().registeringFlag;
      console.log("reg data " + regData)


      if (regData == "yes"){
       
        regData = {myGif}

    }
}).then(() => {

  if (regData != "no") {
    
    document.write(regData)
  }


})

what am I doing wrong? It is just outputting [object Object]

Improve this question
5
  • I'm not sure that document.write is a proper way to do it. You probably need to use ReactDOM.render() and pass your myGif into it as a parameter. Commented Apr 25, 2021 at 3:24
  • understandable, but for some reason, even when I console.log(myGif()) in mainPage, it still outputs [object Object]. This seems strange to me. Commented Apr 25, 2021 at 3:28
  • So You expect an image to be displayed in your console? : ) This is literally impossible as the console is only capable on displaying characters. The thing You need to do is to properly render your react element in html dom. I would recommend to check out the basic React.js tutorial and see how the rendering process works. At the very end You need to get something like ReactDOM.render(myGif, document.getElementById("root")). Commented Apr 25, 2021 at 3:38
  • @hopeless-programmer no i expected the console.log to return ` return <img src={broomAndText} alt="broomAndText" width="200px" height="200px" />`. I could be wrong in how that works. I basically just want to set regData to what should return from myGif(), I guess it is more complex then I thought :( Commented Apr 25, 2021 at 3:41
  • Your react element - <img ... /> - is much more than just a string. Basically, You can't just convert it into a plain text and put it into a document. Please check my answer below for details. Commented Apr 25, 2021 at 3:46

1 Answer 1

Reset to default
1

I think what You need is to render your react element properly. Instead of just writing text into html via document.write() You need to render it to some existing DOM element. For instance, a div inside a body:

import ReactDOM from 'react-dom'
import MyGif from './spinner'

const div = document.createElement('div')

div.id = '__root'

document.body.appendChild(div)
ReactDOM.render(<MyGif/>, document.getElementById('__root'))

Also please note that I replace your camelCase notation for a myGif with PascalCase, as react will interpret it incorrectly the other way. You also need to put your element inside xml tag (<> braces) to actually create it and make it work.

As first step You may just replace document.write(regData) with ReactDOM.render(myGif, document.getElementsByTagName('body') and it should work. But in perspective it would be much better to check some basic react tutorials on how the rendering process works in react. It is not as simple as putting plain html into document.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

i see, okay. Yes will def have to check out the docs. For now though, in theory, I should just be able to put ReactDOM.render(myGif, document.getElementsByTagName('body')), into where I am currently putting document.write, I assume. If my assumption is correct, then it is returning the error Error: Target container is not a DOM element..
Yeah, it was my mistake. I posted a code without considering that myGif is not actually a react element, but rather a function. I already updated the answer and You can try it now once more.
okay I see. I am not sure why, but it now says, 'MyGif' is not defined react/jsx-no-undef. This seems to be maybe syntax error with jsx?
Did You update the import statement? It should be PascalCase import MyGif instead of camelCase import myGif.
I did go back adn update it, i understand what you were saying now about PascalCase. Once that was done, I got the first error again, Error: Target container is not a DOM element... I have the correct React import as well, just incase that was of question :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.