title: how to append react component with appendChild method
body: <p>I have to use the following component more than 1 time.</p>
  <pre><code>  const OnePen = (props) =&gt; {
   return (
     &lt;div className=&quot;cerd&quot; key={props.ID}&gt;
       &lt;div className=&quot; card-body&quot;&gt;
         &lt;h2 className=&quot;card-title&quot;&gt;{props.title}&lt;/h2&gt;
         &lt;p className=&quot;card-text&quot;&gt;{props.desc}&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   );
  };
  export default OnePen;
  </code></pre>
  <p>Using the above component, the following code is working fine and doing the perfect job.</p>
  <pre><code>import OnePen from &quot;./OnePen&quot;;
  const PensList = ({ pens }) =&gt; {
    return (
      &lt;&gt;
        &lt;div id=&quot;mainPen&quot; className=&quot; wrapper&quot;&gt;
          {pens.map((pen) =&gt; (
            **&lt;OnePen ID={pen.id} title={pen.title} desc={pen.description}&gt;&lt;/OnePen&gt;**
          ))}
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default PensList;
  </code></pre>
  <p>However, the following code does not work as it says the type of element appending with appendChild should be Node. when I create the same component with react-create-element it works fine but I don't have to do it again and again and I want to reuse the same component.</p>
  <p>Here is the code with the problem...
  commented code does the job but I don't have to create it like that.. I have to append</p>
  <pre><code>    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      const pen = { title, description };
  
      axios.post(&quot;http://localhost:5000/addPen&quot;, pen).then((res) =&gt; {
        if (res.status === 200) {
          // const div1 = document.createElement(&quot;div&quot;);
          // div1.className = &quot;cerd&quot;;
          // const key = document.createAttribute(&quot;key&quot;);
          // key.value = res.data._id;
  
          // const div2 = document.createElement(&quot;div&quot;);
          // div2.className = &quot;card-body&quot;;
  
          // const h2 = document.createElement(&quot;h2&quot;);
          // h2.className = &quot;card-title&quot;;
          // h2.innerHTML = res.data.title;
  
          // const p = document.createElement(&quot;p&quot;);
          // p.className = &quot;card-text&quot;;
          // p.innerHTML = res.data.description;
  
          // div2.appendChild(h2);
          // div2.appendChild(p);
          // div1.appendChild(div2);
  
          **document
            .getElementById(&quot;mainPen&quot;)
            .appendChild(
              &lt;OnePen ID={res.data._id} title={res.data.title} desc={res.data.description}&gt;&lt;/OnePen&gt;
            );**
        }
      });
    };
  
    return (
      //some code
    );
  };
  
  export default CreatePen;
  </code></pre>
  <p>Thanks for considrations</p>