appendchild a React Component message

Question

How add a React.js Component as a function using appendChild like the following:

const message = (reactComponent) => {
  document.body.appendChild(reactComponent);
}

const MyReactComponent = () => (<span>Welcome back 👍</span>);

message(<MyReactComponent />);  // Send a message to the user

Answer 1

Here is my solution:

First I create the message function using the rc-notification package and put it in a separate folder named message.js:

import Notification from "rc-notification";
import "rc-notification/assets/index.css";

let notification = null;
Notification.newInstance({}, (n) => notification = n);


function message(content) {
    notification.notice({ content });
}

export default message;

Then, I can import this function and use it to send a message to the user like the following:

import React from "react";
import message from "./PATH_TO_MESSAGE_FUNC";

const App = () => {
  const MyReactComponent = () => <span>Welcome back 👍</span>;
  successMessage(<MyReactComponent />);  // trigger on page load in this case
  
  return (
    <div>My app</div>
  )
}

export default App;