How to return two functions in ReactJS?

[tiered_hermit]

I want to return two functions in my App.js file, but only one of them is applied. What if I want to have two functions?

import React      from 'react';
 import ReactDOM   from 'react-dom';
  
   
  
   function A()
   {      
  return(
   <p> This is my first function</p>
    );
  }           
              
  function B()
  {
  return( 
  <p>This is my second function</p>
  );
  }
   ReactDOM.render(A,document.getElementById('root'));
  ReactDOM.render(B,document.getElementById('root1'));
   export     default A;

I know that each function needs a <div>root</div>,in public/index.html,
so I added <div>root1</div> in my index.html and added:
ReactDOM.render(b,document.getElementById('root1')); to return my two functions, but nothing has changed. I’m new to React and cannot understand what’s wrong with my code. The output is :

This is the first function

How can I have:

This is the first function
This is the second function

Besides I cannot have two export defaults in App.js.
Finally, I’d like to know if I need to edit public/index.html ?

[miku86]

I think it doesn’t make sense to render two applications.

Why do you want to do this?

If you want to return two components in one application, add both of them in the return, in your case both <p> with a parent around it.

[jenovs]

Yes, you cannot have two export default in a file.
Yes, you need to edit public/index.html to add second root node.

An example: https://codesandbox.io/s/empty-surf-0d0nz?file=/src/index.js

@miku86

I think it doesn’t make sense to render two applications.

It’s called micro frontends architecture, although I’m not sure if OP is aware of it.