title: Traversing / Editing DOM in React JS
body: <p>I am new to React JS and planning to use it in one of my projects. I have gone through the docs and have a slight idea of React. I have a scenario with the following details : </p>
  
  <ol>
  <li>Server pushes array of items / list to UI in frequent intervals.      </li>
  <li>The items in the list are not similar to each other or multiple lists      but will be displayed in the order they are received.       </li>
  <li>Items will have to appended to DOM upon AJAX response / push notification from server.  </li>
  <li>Few cases, will have to edit / delete the items from DOM based on a reference.   </li>
  </ol>
  
  <p>I was going through few articles in stack overflow for appending data dynamically and few of them are below : </p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/37605222/can-i-append-my-component-to-a-divs-existing-content-in-reactjs">Can I append my component to a div&#39;s existing content in ReactJS?</a>.  </li>
  <li><a href="https://stackoverflow.com/questions/32438241/reactjs-component-rendering-and-how-to-append-elements-to-the-div-the-component">ReactJS component rendering and how to append elements to the div the component is mounted on</a>.  </li>
  <li><a href="https://stackoverflow.com/questions/35905988/react-js-how-to-append-a-component-on-click">React.js: How to append a component on click?</a>.  </li>
  <li><a href="https://stackoverflow.com/questions/30721836/how-to-append-to-dom-in-react">How to append to dom in React?</a>.  </li>
  </ul>
  
  <p>All the above solutions doesn't provide a direct option for appending. They recommend to create a map / array and add the values to the map and re-render the values. </p>
  
  <p>I am not very comfortable in using maps as I won't be passing the details to server and its only shown to user. I think creating a map will have redundant values which occupies memory if the list grows huge. </p>
  
  <p>I dont want to mix jQuery / any other library along with React. Is there any possibility where a render function / component will append to DOM instead of maintaining in an array as the items in the list are not similar.</p>
  
  <p>Why there isn't any option to traverse / edit DOM directly instead of maintaining a list. Can you guide me if there is an option so that I will be able to understand its advantages.</p>