title: React JS. Append element to the DOM
body: <p>I'm new to react and I've been playing around with it the past few days. I'm trying to append a value to the DOM, I found a way to do it but I'm looking for a way to do with by </p>
  
  <pre><code>var para = document.createElement("li");
  var t = document.createTextNode(value);
  para.appendChild(t);
  document.getElementById("root").appendChild(para); 
  </code></pre>
  
  <p>But, I'm looking for a different way. I tried a few different ways but I'm stuck. Is there a way other than this way above ^^^^</p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  
  
  export class Parent extends React.Component {
    constructor(props) {
      this.greet = this.greet.bind(this);
      this.state = { text: " " };
    }
  
    greet(value) {
      //console.log(value);
  
      var para = document.createElement("li");
      var t = document.createTextNode(value);
      para.appendChild(t);
      document.getElementById("root").appendChild(para); 
  
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Child onGreet={this.greet} /&gt;
        &lt;/div&gt;
      )
    }
  };
  
  
  export class Child extends React.Component {
  
    constructor(props) {
      this.state = { value: '' };
      this.handleChange = this.handleChange.bind(this);
      this.eventClick = this.eventClick.bind(this);
    }
  
    handleChange(event) {
      this.setState({ value: event.target.value });
    }
  
    eventClick() {
      this.props.onGreet(this.state.value);
    }
  
    render() {
      return (
        &lt;div&gt;
  &lt;input type="text" value={this.state.value} onChange={this.handleChange} /&gt;
  &lt;button type="button" onClick={this.eventClick}&gt;Submit &lt;/button&gt;
        &lt;/div&gt;
      )
    }
  };
  </code></pre>