getting [object Object] instead of my jsx element in react - reactjs

Question

i want to add paragraph element to my div element on first mount .But on browser ,i see [object Object]. Also,i want to know why i am getting [object Object] on my browser instead of text 'hi' . what changes to be made for 'hi' text instead of [object Object].
import './App.css';
import {useEffect,useState} from 'react'
function App() {
let h=(<p>hi</p>);
useEffect(()=>{
document.getElementById('i').append(h)
},[])
return (
<div id='i' className="App">
</div>
);
}
export default App;

Answer 1

Never use native DOM methods in React unless there's no other option.
Here, you should interpolate the <p> into the returned JSX. Use a boolean state to indicate whether the initial mount has completed.
const { useEffect, useState} = React;
function App() {
const [mounted, setMounted] = useState(false);
useEffect(()=>{
setMounted(true);
},[])
return (
<div id='i' className="App">
{
mounted && <p>hi</p>
}
</div>
);
}
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div class='react'></div>

Answer 2

you are getting [object][object] because you are passing object in h.
You can change the code as below to get your desired output,
let h='<p>hi</p>)';
document.getElementById("i").innerHTML += h
Full code below,
//import './App.css';
import React, {useEffect,useState} from 'react'
function App() {
let h='<p>hi</p>)';
useEffect(()=>{
document.getElementById("i").innerHTML += h
},[])
return (
<div id='i' className="App">
</div>
);
}
export default App;