A store from context and a reducer in React
React interview exercise on Context & reducers, difficulty 3 of 3. Solve it in the editor beside a worked example; the tests run the moment you do.
Build a todos store: TodosProvider holds { id, title, done }[] with a reducer (add with a title, toggle by id, remove by id; ids count up from 1) and exposes useTodos() and useTodosDispatch(). AddTodo renders an <input> that dispatches add on Enter and clears; TodoItems renders <li> per todo with the class "done", a checkbox to toggle and a <button className="remove">; TodosApp composes them inside the provider.
Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Progress is saved in your browser, and in your account if you sign in.