Basically, I have one page that consists of three main components. A map, a custom Search box, and a list that shows the selected locations, which is stored in the main component's state. For each location it renders a component (MarkerList) that has its own state and interactivity. These components are created using a .map() function.

The problem arises when a user interacts with the other two components. Any update to the main component's state causes it to create a new array of List components, and thus resets the state of that component. From my understanding this is what .map is supposed to do.

I've tried wrapping the .map in a callback, and that works until the itemList is updated, and then all interactivity with any of the list components is reset because all the components are new. I've also tried to instead render an array of the components instead of using the .map() function to no avail.

return (
   <div>
      <TestMap />
      <div>
         <Search items={items} />

         {itemList.map(i =>
            <MarkerList key={uuid()} items={i.items}/>
         )}

      </div>
   </div>
)

I've omitted a lot of the styling and props. But the TestMap and Search components but have props which allow them to alter this component's state.

Is there any way to go about rendering the MarkerList components in such a way that they are not destroyed/created on every state change? And would there be any way to "remember" the state for each MarkerList when a new item is added to the itemList? Any help would be greatly appreciated!