0

I'm trying to appendChild() on a div with React. I am pretty new to React so I'm not sure why this throws this error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

This is the code - if someone can explain this that would help a ton.

import React from 'react'
import './global.css'
import TextCopy from './TextCopy/TextCopy'
import Title from './Title/Title'

export default function App() {
  const renderTextCopy = (text) => {
    document.getElementById("wrapper").appendChild(<TextCopy text={text} />)
  }
  
  return (
    <>
      <Title />

      <button onClick={() => renderTextCopy("test")}>JAVA</button>

      <div id="wrapper"></div>
    </>
  )
}
Kip
  • 81
  • 1
  • 5
  • you cannot do that. Change how you think in react. you want to render a component when a button is clicked. create a state that changes from false to true on button click, and render "TextCopy" when flag is true with whatever text you want. – Beki Nov 12 '22 at 06:58
  • You're trying to append a react JSX object, which is not an HTML Node object. Basically, you're not using react properly in this case. Instead of targeting an element in this DOM tree, and appending an element to it, you should save the `text` in a state object and render that `` react node it as a child. – Derek Nov 12 '22 at 06:59
  • Check this out: https://stackoverflow.com/questions/27079598/error-failed-to-execute-appendchild-on-node-parameter-1-is-not-of-type-no – Abhishek Nov 12 '22 at 07:06

0 Answers0