How do you insert/append a react Component on mount

Like the title says, on mount I want to insert/append a Component, either as a child or sibling.

Things I've found online that haven't worked:

• ReactDOM.render()
  • This replaces the whole node and its children with the <Component />.
• .insertAdjacentElement()
  • I get the type error Argument of type 'ReactNode' is not assignable to parameter of type 'Element'.
• .appendChild()
  • I get the error Argument of type 'JSX.Element' is not assignable to parameter of type 'Node'.
• .append()
  • I get error Argument of type 'Element' is not assignable to parameter of type 'string | Node'.

For example:

React.useEffect(() => {
  // Code that makes <Component /> appear in DOM
}, []);

<div>
  <div>
    <p>Something</p>
    {/* On mount <Component /> is inserted here */}
  </div>
</div>

[Edited for more detail]:

I'm looking for a solution where I don't have to enter anything inside of the return ();.

All functionality to insert the <Component /> needs to be done above that.

You could handle it like this:

1. use a state boolean flag to handle the component's visibility
2. in the JSX part return the dynamic content(which is also a react component), with a condition
3. use an useEffect hook to execute a scope just once after the first render, to change the visibility to true
4. create a clickHandler that switches the visibility on/off, and link it to a button

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { useEffect, useState } from 'react';

const DynamicContent = () => <div>dynamic content</div>;

const MyComponent = () => {
  const [isVisible, setVisibility] = useState(false);        //1

  useEffect(() => {
    setVisibility(true);                                     //3
  }, []);

  const handleClick = () => {
    setVisibility(!isVisible);                               //4
  };

  return (
    <div className="my-component">
      <h1 className="my-component__dynamic-content">This is dynamic content</h1>
      <button onClick={handleClick}>change visibility</button>
      {isVisible && <DynamicContent />}                      //2
    </div>
  );
};

export default MyComponent;

<!-- end snippet -->

note that I am using:

• AtomicDesign folder structure
• BEM className pattern

Most of the methods listed are DOM api calls (insertAdjacentElement, appendChild() etc.) The reason you're getting all these type errors is because you can't mix and match React and DOM elements like that. React uses it's own virtual dom and doing something outside it's rendering mechanisms is a huge anti-pattern.

<Component /> although this looks like a DOM element, JSX actually compiles to function calls behind the scenes. You could potentially do something like this to render HTML directly in your effect.

const textnode = document.createTextNode("Water");
node.appendChild(textnode);

But this will not be treated as React and you'll lose the state management functionality. The proper way to do this is to use a conditional in your render() method like the other answers suggested.