calling function to display html in javascript

Question

I have this function in my spinner.js file:

import React from 'react';
import broomAndText from './ezgif.com-video-to-gif-3.gif';
import './spinner.css';

        function myGif() {
    
        return <html><body><div class="imgContainer"><img src={broomAndText} alt="broomAndText"/></div></body></html>

    }
    
    export default myGif;

I want to call this function from here:

 } else {

                        
       myGif()

        createCheckoutSession()
         console.log("does not exist!")
     }
   });

when I call myGif() like this, it does not display onto screen. how do i do this?

React is SPA which means whole components are running on a single web page. That means though many components are made, all components are put in a single .html file. That's why loading a page takes much less time on React. Seems other tags without HTML should be put. — jacobkim
– jacobkim, Commented Apr 26, 2021 at 3:36
@jacobkim React is absolutely not an SPA, it's a UI library. Whether you use it as an SPA, a server side rendered UI, or even just as a touch of reactivity in a plain HTML file is up to the user. Also, SPAs result in longer, far longer page loads, not shorter. That's the whole point. Longer startup, faster switching. — rschristian
– rschristian, Commented Apr 26, 2021 at 6:59
@rschristian React is not a simple UI library. When React is running the server which installed React is need. When SPA runs without a router module, switching within pages isn't possible. You shouldn't use React library only without many node packages. — jacobkim
– jacobkim, Commented Apr 26, 2021 at 7:30
React absolutely is just a UI library. There is no such thing as "React running the server". You absolutely can switch pages without a router module via anchor tags. They've existed for decades. It's how SSR works. There's no need to run React in an SPA. There's tons of ways to use it effectively. — rschristian
– rschristian, Commented Apr 26, 2021 at 20:22

Drew Reese · Accepted Answer · 2021-04-26 01:04:30Z

1

React components shouldn't render another html or body tag, it should be just the div. React components also use a className prop.

import React from 'react';
import broomAndText from './ezgif.com-video-to-gif-3.gif';
import './spinner.css';

function MyGif() {
  return (
    <div class="imgContainer">
      <img src={broomAndText} alt="broomAndText"/>
    </div>
  );
}

export default MyGif;

React components are also not called as functions, but rather they are templated into renderable JSX and the React framework handles calling the function during the component lifecycle.

import MyGif from '../path/to/MyGif";

...

return (
  ...
  <MyGif />
  ...
);

answered Apr 26, 2021 at 1:04

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

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

Collectives™ on Stack Overflow

calling function to display html in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related