Create element with own state/context

jpenna commented 7 years ago

I am trying to create a TODO app with more than 1 TODO component in the same page, but without using an array.map(...).

I'd like to create the component with it's own state, so I can have one TODO with a list and the other with another list. I am trying something like this:

<div>
  ${todoList(state, emit)}
  ${todoList(state, emit)}
  ${todoList(state, emit)}
</div>

How can I achieve this? When I create it like this they are all sharing the same state. I tried creating a property todoList in state and push the instances there, but I couldn't think of a way to identify what is the first time the element is created and what is a dynamic render event, so I was triggering only the first addState call.

let firstAccess = true;
let thisState;
const componentName = 'todoList';

function initialize(state, emitter) {
  const initialized = addState(componentName, initialState, state);
  firstAccess = false;
  thisState = initialized;
  eventListeners(thisState, emitter);
}

export default (state, emit, emitter) => {
  if (firstAccess) initialize(state, emitter);
[...]

I could use the DOMContentLoaded event, but what if I insert the element dynamically later?

My code is here, if you want to take a look: https://github.com/jpenna/todo_choo

EDIT: Basically, what I want is to initialize the state inside the component (not in the app instance), but when I do this I reset the state.