jogilvyt

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter</h1>
      <p>Number: {count}</p>
      <button onClick={() => setCount(count - 1)}>-1</button>

jogilvyt

import { useState } from "react";

function App() {
  const [count, setCount] = useState(() => {
    const persistedValue = window.localStorage.getItem("count");
    return persistedValue !== null ? JSON.parse(persistedValue) : 0;
  });

  return (
    <div>

jogilvyt

import { useState, useEffect } from "react";

function App() {
  const key = "count";

  const [count, setCount] = useState(() => {
    const persistedValue = window.localStorage.getItem(key);
    return persistedValue !== null ? JSON.parse(persistedValue) : 0;
  });

jogilvyt

import { useState, useEffect } from "react";

const useStateWithLocalStorage = (defaultValue, key) => {
  const [value, setValue] = useState(() => {
    const persistedValue = window.localStorage.getItem(key);

    return persistedValue !== null ? JSON.parse(persistedValue) : defaultValue;
  });

  useEffect(() => {

jogilvyt

import useStateWithLocalStorage from "../hooks/useStateWithLocalStorage";

function App() {
  const [count, setCount] = useStateWithLocalStorage(0, "count");

  return (
    <div>
      <h1>Counter</h1>
      <p>Number: {count}</p>
      <button onClick={() => setCount(count - 1)}>-1</button>

jogilvyt

import { renderHook, act } from "@testing-library/react-hooks";

import useStateWithLocalStorage from "./useStateWithLocalStorage";

const TEST_KEY = "key";
const TEST_VALUE = { test: "test" };

describe("useStateWithLocalStorage", () => {
  it("should set localStorage with default value", () => {
    renderHook(() => useStateWithLocalStorage(TEST_VALUE, TEST_KEY));

jogilvyt

it("should initialise with the value stored in localStorage", () => {
  // set the localStorage to a value other than 0
  localStorage.setItem("count", 15);

  // render the App and check it initialises to the value in localStorage
  render(<App />);
  screen.getByText(/Number: 15/);

  // click the increment button and check the localStorage is updated
  const incrementButton = screen.getByText(/\+1/);

jogilvyt

class LocalStorageMock {
  constructor() {
    this.store = {};
  }

  clear() {
    this.store = {};
  }

  getItem(key) {

jogilvyt

import { useState } from "react";
import { v4 as uuid } from "uuid";

import "./ToDo.css";
import ToDoList from "./ToDoList";
import Form from "./Form";

const ToDo = () => {
  const [todos, setTodos] = useState([{ id: uuid(), value: "A to do item" }]);

jogilvyt

import ToDoItem from "../ToDoItem";

const ToDoList = ({ todos, handleDelete }) => {
  return (
    <ul className="list">
      {todos.length ? (
        todos.map(item => (
          <ToDoItem item={item} handleDelete={handleDelete} key={item.id} />
        ))
      ) : (