0
154
ViewsReact - splicing a positioned element from an array will cause next index to be rendered
I implemented a chat feature in my react app using websockets that looks like this
The messages are rendered into a new component with the map function. When clicked, an absolute positioned div slides across from the left (translated to 100% on the x axis when hidden and to 0% when in view) with the chat information. It looks like this
When a new message is received, I use the array slice function to pop a chat out of the array and the array unshift function to put it at the start of the array, so that the latest chat always appears at the top. This means that when a chat is open and a new message is received, it is popped out of the the array and the next chat in the array becomes visible.
To be more precise, please refer to the first image. if test2@yahoo.com is open and a new message is received, test1@yahoo.com becomes active since it is the next in the array.
I know this is the expected behaviour, but is there anyway to go about it and still keep a component visible even after it's position in the array has changed?
1 answers
Answer question0
After a bit of intense research I've solved it. When my chat components were rendered, I used the index as the key. When the new message was moved to the top, the indexes were reordered. Using another unique value as the key solves the issue.