Is there any way to += an innerHTML in reactJS?

Question

I'm trying to add a text onto a div which is rendered with the RenderPage() function and exported to an index.js file to be rendered, is there any way to add a text to a div with innerHTML += 'asdf'

I have tried document.getElementsByClassName('preview').innerHTML = itemsThingy[0] + count['matcha']

But it doesn't seem to render it...

Answer 1

You shouldn't mutate the DOM in React - you can still set innerHTML, but to do this you have to use the function dangerouslySetInnerHTML instead, which indicates this is not a good practice and should pretty much never be done.

There are many other ways to achieve the same results you're looking for in React without having to manipulate the DOM - you can conditionally render JSX, or use lazy-loading with suspense depending on your specific usecase.