Use Yup to validate email input

Yup.string().email("Invalid email address").required("Required")
// first Yup needs to know the type of value (string) and then chain the 
// different validation rules with their associated error message to show

What is the output?

1. You write “Wash the car” in the first ToDo input

2. You write “Buy bumper stickers” in the second ToDo input

3. You click the button to reverse the order

const ToDo = props => (
  <tr>
    <td>
      <label>{props.id}</label>
    </td>
    <td>
      <input />
    </td>
    <td>
      <label>{props.createdAt}</label>
    </td>
  </tr>
);

function App() {
  const [todos, setTodos] = useState([
    {
      id: 'todo1',
      createdAt: '18:00',
    }, 
    {
      id: 'todo2',
      createdAt: '20:30',
    }
  ]);

  const reverseOrder = () => {
    // Reverse is a mutative operation, need to create a new array first
    setTodos([...todos].reverse());
  };

  return (
    <div>
      <button onClick={reverseOrder}>Reverse</button>
      {todos.map((todo, index) => (
        <ToDo key={index} id={todo.id} createdAt={todo.createdAt} />
      ))}
    </div>
  );
}

<aside>

todo1 Buy bumper stickers 18:00

todo2 Wash the car 20:30

</aside>

Errors in ThemeProvider

import{ createContext, useContext, useState} from"react";

const ThemeContext = createContext(undefined);
// createContext deault value?

export const ThemeProvider= () => {
  const[theme, setTheme] = useState("light");

  return(
    <ThemeContext.Provider
      value={{
        theme,
        toggleTheme: () => setTheme(!theme),
        //toggleTheme: () =>setTheme(theme === "light" ? "dark" : "light")
      }}
    >
    </ThemeContext.Provider>
  );
};

React Elements