Todo App

This is a tried-and-true interview challenge!

Below, you'll find static markup for a Todo list application. Your job is to make it reactive, so that the state is tracked in React, and new items can be added to the list.

Difficulty

I'd say this is a medium-difficulty challenge, the sort of thing you might be expected to do in a junior developer interview. It's similar to things we've done in the course, so hopefully that makes this a bit easier!

Rules

Immer has been installed in this playground, if you wish to use it. Otherwise, no third-party libraries are allowed.
Feel free to google anything you'd like.

Playground

Code Playground

Acceptance Criteria:

• It should be possible to add new todos by typing in the main input and pressing "Enter".

• Todos can be marked as completed by clicking them. Clicking again will mark it as incomplete.

• There should be no key warnings, and your approach should be fully accessible.

import React from 'react';

function App() {

return (

<main>

<form>

What needs to be done?

</label>

</form>

<ol>

<li>

<label htmlFor="todo-1">Invite classmates</label>

</li>

<li>

<label htmlFor="todo-2">Hire clown</label>

</li>

<li>

<label htmlFor="todo-3">Order bouncy castle</label>

</li>

</ol>

</main>

);

}

export default App;

My attempt

Attempt code (success)

import React from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO': {
      return [
        ...state,
        {
          label: action.label,
          id: crypto.randomUUID(),
          completed: false,
        },
      ];
    }

    case 'TOGGLE_TODO': {
      return state.map((todo) => {
        if (todo.id === action.id) {
          return {
            ...todo,
            completed: !todo.completed,
          };
        }

        return todo;
      });
    }
  }
}

function App() {
  const [tentativeTodo, setTentativeTodo] =
    React.useState('');
  const [state, dispatch] = React.useReducer(
    reducer,
    []
  );

  function handleSubmitForm(event) {
    event.preventDefault();

    dispatch({
      type: 'ADD_TODO',
      label: tentativeTodo,
    });

    setTentativeTodo('');
  }


  return (
    <main>
      <form onSubmit={handleSubmitForm}>
        <label htmlFor="todo-input">
          What needs to be done?
        </label>
        <input
          id="todo-input"
          value={tentativeTodo}
          onChange={(event) =>
            setTentativeTodo(event.target.value)
          }
        />
      </form>
      <ol>
        {state.map(({ label, id, completed }) => (
          <li key={id}>
            <input
              type="checkbox"
              id={id}
              checked={completed}
              onChange={() =>
                dispatch({
                  type: 'TOGGLE_TODO',
                  id,
                })
              }
            />
            <label htmlFor={id}>{label}</label>
          </li>
        ))}
      </ol>
    </main>
  );
}

export default App;