ReactJS Rendering a component using a function call

Question

So I am trying to create a component that I can use anywhere in my app. I am not entirely sure how to explain it accurately but I'll use the sweet alert library as an example.

So in swal, you can simply call something like this and the component would render itself.

import swal from 'sweetalert';

swal("Hello world!");

How can I replicate that into my own component so I could call it like

ConfirmationDialog({
     message: 'test',
     visibility: true,
     onConfirm: handleOnConfirm,
     onCancel: handleOnCancel
})

arellak · Accepted Answer · 2023-01-31 13:57:57Z

1

It's basically in one of the first points in the react documentation.
State and Lifecycle
At least if I understood your question correctly.

First example on the above website:

const root = ReactDOM.createRoot(document.getElementById('root'));
  
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

answered Jan 31, 2023 at 13:57

arellak

1121 gold badge2 silver badges8 bronze badges

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

3 Comments

Jheems Over a year ago

been trying to do this actually however the problem is the page is already rendered and I cannot call root.render like on your example, I basically want to append the component on the DOM without calling root.render.

arellak Over a year ago

Rendering function/Component without a call from render function Conditional Rendering Maybe those two links can help you. But as far as I know you can't render an element without calling the render function. How is react supposed to know that you want to render an element? Only one option comes to my mind: Add the root element as a parameter to your function.

Jheems Over a year ago

thank you for your insight, I may have an idea for a solution to my problem. thanks!

Collectives™ on Stack Overflow

ReactJS Rendering a component using a function call

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related