Having a problem with conditional rendering. Check out my flawless view:
function todoItem(todo) {
return li('.list-item',[
todo.editing ? input('.todo-edit', {type: 'text', value: todo.text, autofocus: true, attributes: { 'data-id': todo.id }}) : '',
!todo.editing ? span(`.todo ${todo.completed ? '.completed' : ''}`, { attributes: { 'data-id': todo.id }}, todo.text) : '',
button('.remove-todo', {type: 'button', value: todo.id}, 'remove'),
todo.completed ? button('.unmark-todo', {type: 'button', value: todo.id}, 'unmark') : '',
!todo.completed ? button('.mark-todo', {type: 'button', value: todo.id}, 'mark as done') : ''
]);
const view = (state$) => {
return state$.map(todos =>
div([
input('.todo-input', {type: 'text', placeholder: 'Todo', value: ''}),
ul(todos.items.map(todo => todoItem(todo))),
footer(todos)
])
);
};
The issue arises when trying to convert the conditional buttons to an if-else statement instead of two separate conditions:
todo.completed ?
button('.unmark-todo', {type: 'button', value: todo.id}, 'unmark') :
button('.mark-todo', {type: 'button', value: todo.id}, 'mark as done')
It seems like it switches between "unmark" and "mark" repeatedly (confirmed with console logs). The classes .mark and .unmark are correctly assigned, so that should not be the problem...
Is this an actual error or am I overlooking something?