refactor: Better align REPL examples for comparison #1164
Conversation
| return ( | ||
| <form onSubmit={addTodo}> | ||
| <input type="text" value={newItem.value} onInput={onInput} /> | ||
| <button onClick={addTodo}>Add</button> | ||
| <ul> | ||
| {todos.value.map((todo, index) => ( | ||
| <li> | ||
| <label> | ||
| <input | ||
| type="checkbox" | ||
| checked={todo.completed} | ||
| onInput={() => { | ||
| todo.completed = !todo.completed; | ||
| todos.value = [...todos.value]; | ||
| }} | ||
| /> | ||
| {todo.completed ? <s>{todo.text}</s> : todo.text} | ||
| </label>{' '} | ||
| <button onClick={() => removeTodo(index)}>❌</button> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| <p>Completed count: {completedCount.value}</p> | ||
| </form> | ||
| ); | ||
| } |
There was a problem hiding this comment.
The updated example doesn't work. Try removing a todo.
There was a problem hiding this comment.
Seems to work just fine for me? What issue are you seeing?
There was a problem hiding this comment.
The remove button doesn't actually remove the todo item, it only empties the text. The previous example works just fine.
There was a problem hiding this comment.
Strange, I can't reproduce. Try refreshing whilst clearing the cache, you might have something left over? Else, I'll look into it when I can.
Peek.2024-08-31.23-41.mp4
There was a problem hiding this comment.
Refreshing doesn't help in my case. My browser is Chrome 128.0.6613.114 on Windows 10.
I made a longer recording, and based on my observation, it seems that clicking the remove button indeed removed the todo item, but it also triggered the form submission and appended an empty todo item:
There was a problem hiding this comment.
Ah, yep, forgot type="button" as per usual.
Good catch!
We have a couple examples that beg comparison (
countervscounter-htm,todo-listvstodo-list-signals) but have implemented them rather differently so that the comparison mostly falls flat -- it's very much an apples-to-oranges comparison.While that's not inherently a problem, I think it's better to more closely align these examples so that we can better show newer users the direct translation of some (very basic) concepts of these APIs we offer.
I might go pick up a list of other common examples that other framework show, might be nice to flesh this list out further.
I also ran all the examples through Prettier, some were a bit inconsistent