router-article-todos

router-article-todos.js

const TodoList = ({ todos, pathArr }) => {
  const [first, todoId] = pathArr;
  return (
    <div>
      <h1>Todos Module</h1>
      {typeof todoId === "undefined" ? (
        <div>
          <h2>List of todos:</h2>
          {todos ? (
            todos.map(todo => <Todo key={todo.id} todo={todo} />)
          ) : (
            <p>There are no todos.</p>
          )}
        </div>
      ) : (
        <TodoDetail todo={todos.find(todo => todo.id == todoId)} />
      )}
    </div>
  );
};

const Todo = ({ todo }) => (
  <p>
    <a href="#" onClick={createClickHandler(`/todos/${todo.id}`)}>
      {todo.text}
    </a>
  </p>
);

const TodoDetail = ({ todo }) => (
  <div>
    Detail page for {todo.id}
    <br />
    Text: {todo.text}
  </div>
);