react examples for a friend

react-example.js

/** Assume database returns data for tasks, we may
 * model each task as an object, and use React for the view.
 **/

/**
 * Simple component that accepts data for a task, and returns markup for it
 **/
function Task({name, finished, reminderDateTime, dueDate}) {
  return (
    <fieldset>
      <legend>
        <input
          type="checkbox"
          checked={finished} />
        &nbsp; Task: {name}
      </legend>
      Remind me on: {reminderDateTime}<br>
      Due Date: {dueDate}
    </fieldset>
  );
}

/**
 * An array of tasks. Each task is a js object like:
 *  {
 *     name: "call my friend",
 *     finished: true,  
 *     reminderDateTime: null, // its finished, no remind time set
 *     dueDate: Date obj
 *  }
 **/
function TodoList(tasks) {
    return (
      <ul>
        {tasks.map(task => <li> <Task {...task} /> </li>)}
      </ul>
    );
}