//App Component

    <div>
      <h1>Lama Book Shop</h1>
      <div className="books">
        {books.map((book) => (
          <div key={book.id} className="book">
            <img src={book.cover} alt="" />
            <h2>{book.title}</h2>
            <p>{book.desc}</p>
            <span>${book.price}</span>
            <button className="delete" onClick={() => handleDelete(book.id)}>
              Delete
            </button>
            <button className="update">
              <Link
                to={{
                  pathname: `/update/${book.id}`,
                  state: {'bookId': book.id},
                }}
                style={{ color: "inherit", textDecoration: "none" }}
              >
                Update
              </Link>
            </button>
          </div>
        ))}
      </div>


//Router Component

function App() {
  return (
    <div className="app">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Books />} />
          <Route path="/add" element={<Add />} />
          <Route path="/update/:id" element={<Update />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

//Update (Null Stste component)
const Update = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const bookFromState = location.state?.bookId; #NULL
  console.log("test")
  console.log(location.state) #NULL

  const [book, setBook] = useState(bookFromState || {
    title: "",
    desc: "",
    price: null,
    cover: "",
  });
  const [error,setError] = useState(false)