Traversing / Editing DOM in React JS


(Phanikiran) #1

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 :

  1. Server pushes array of items / list to UI in frequent intervals
  2. The items in the list are not similar to each other or multiple lists but will be displayed in the order they are received.
  3. Items will have to appended to DOM upon AJAX response / push notification from server
  4. Few cases, will have to edit / delete the items from DOM based on a reference.

I was going through few articles in stack overflow for appending data dynamically and few of them are below :




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.

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.

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.

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.

Thanks