Managing lists of components that don't have a key

Sometimes we don't care to manually identify our child components. Instead we just want to build a list by appending items and otherwise letting things manage themselves. This example revolves around a hypothetical simulation of the Chrome developer console. Each log message potentially displays items of data that can be clicked and expanded for further inspection.

To add an item for which we don't have a key, simply use the add method, which generates a unique key and then appends the item internally using set. Remember, collections use ordered maps internally, which is why we're able to use keys but still treat the collection like a list.

function ConsoleMessage(sources) { /* ... */ }

const console$ = logMessage$
  .scan((messages, msg) => messages.add(msg), Collection(ConsoleMessage));