Destructuring Object

let items = {

  uuid_1: { id: "uuid_1", title: "Item 1" },

  uuid_2: { id: "uuid_2", title: "Item 2" },

  uuid_3: { id: "uuid_3", title: "Item 3" },

};

// Delete item with id "uuid_2"

const { uuid_2, ...remainingItems } = items;

items = remainingItems; // Update items to exclude the deleted item

console.log(uuid_2); // Log the deleted item

console.log(items); // Log the remaining items

// Modify item with id "uuid_3"

const modifyId = "uuid_3";

items = {

  ...items,

  [modifyId]: { ...items[modifyId], title: "Updated Item 3" },

};

console.log(items); // Log the updated items

// add new item

const newItem = { id: "uuid_4", title: "Item 4" };

items = { ...items, [newItem.id]: newItem };

console.log(items);

// if items is immutable

let items = {

  uuid_1: { id: "uuid_1", title: "Item 1" },

  uuid_2: { id: "uuid_2", title: "Item 2" },

  uuid_3: { id: "uuid_3", title: "Item 3" },

};

// Immutable delete

const deleteId = "uuid_2";

// const { uuid_2, ...itemsAfterDelete } = items; // directly uses the property name uuid_2 to extract and remove it from the items object.

const { [deleteId]: deletedItem, ...itemsAfterDelete } = items;

// Immutable modify

const modifyId = "uuid_3";

const itemsAfterModify = {

  ...itemsAfterDelete,

  [modifyId]: { ...itemsAfterDelete[modifyId], title: "New item 3" },

};

// Immutable add

const newItem = { id: "uuid_4", title: "Item 4" };

const itemsAfterAdd = { ...itemsAfterModify, [newItem.id]: newItem };

console.log(items); // Original items object remains unchanged

console.log(itemsAfterDelete); // Items after deletion

console.log(itemsAfterModify); // Items after modification

console.log(itemsAfterAdd); // Items after adding a new item

destructuring Map

 

destructuring Map

 // Initialize items as a Map

let items = new Map([

  ["uuid-1", { id: "uuid-1", title: "Item 1" }],

  ["uuid-2", { id: "uuid-2", title: "Item 2" }],

  ["uuid-3", { id: "uuid-3", title: "Item 3" }],

]);

// Delete item with id "uuid-2"

const deleteId = "uuid-2";

const deletedItem = items.get(deleteId); // Get the item to be

deleted (for logging)

items.delete(deleteId); // Delete the item from the Map

console.log(deletedItem); // Log the deleted item

console.log(Array.from(items)); // Convert Map to Array to log remaining items

// modify item with id "uuid-3"

const modifyId = "uuid-3";

const modifiedItem = items.get(modifyId); // Get the item to be modified (for logging)

items.set(modifyId, { ...modifiedItem, title: "Modified Item 3" });

// Modify the item in the Map

console.log(modifiedItem); // Log the modified item

console.log(Array.from(items)); // Convert Map to Array to log remaining items

// Add a new item

const newItem = { id: "uuid-4", title: "Item 4" }; // Create a new item

items.set(newItem.id, newItem); // Add the new item to the Map

console.log(Array.from(items)); // Convert Map to Array to log all items

// MAP IS IMMUTABLE

// Original items Map

const items = new Map([

  ["uuid-1", { id: "uuid-1", title: "Item 1" }],

  ["uuid-2", { id: "uuid-2", title: "Item 2" }],

  ["uuid-3", { id: "uuid-3", title: "Item 3" }],

]);

// Immutable Delete

const deleteId = "uuid-2";

const itemsAfterDelete = new Map([...items].filter(([key, _]) => key !== deleteId));

// Immutable Modify

const modifyId = "uuid-3";

const modifiedItem = { ...items.get(modifyId), title: "Modified Item 3" };

const itemsAfterModify = new Map([...itemsAfterDelete]

.map(([key, value]) => key === modifyId ? [key, modifiedItem] : [key, value]));

// Immutable Add

const newItem = { id: "uuid-4", title: "Item 4" };

const itemsAfterAdd = new Map([...itemsAfterModify, [newItem.id, newItem]]);

// Logging for demonstration

console.log(Array.from(items)); // Original items Map remains unchanged

console.log(Array.from(itemsAfterDelete)); // Items after deletion

console.log(Array.from(itemsAfterModify)); // Items after modification

console.log(Array.from(itemsAfterAdd)); // Items after adding a new item

immutable

Immutable array

// Original items array

const items = [

  { id: "uuid-1", title: "Item 1" },

  { id: "uuid-2", title: "Item 2" },

  { id: "uuid-3", title: "Item 3" },

];

// Immutable Delete

const deleteId = "uuid-2";

const itemsAfterDelete = items.filter(item => item.id !== deleteId);

// Immutable Modify

const modifyId = "uuid-3";

const itemsAfterModify = itemsAfterDelete.map(item =>

  item.id === modifyId ? { ...item, title: "Modified Item 3" } : item

);

// Immutable Add

const newItem = { id: "uuid-4", title: "Item 4" };

const itemsAfterAdd = [...itemsAfterModify, newItem];

// Logging for demonstration

console.log(items); // Original items array remains unchanged

console.log(itemsAfterDelete); // Items after deletion

console.log(itemsAfterModify); // Items after modification

console.log(itemsAfterAdd); // Items after adding a new item  

lien

Cours

fetch

   useEffect(() => {

    fetch("https://fakestoreapi.com/products/")

      .then((res) => res.json())

      .then((json) => {

        console.log(json);

        setProducts(json);

      });

  }, []);

 

usestate

 import { useState } from "react";

function SearchBar({ searchText, onSearchTextChange }) {

  return (

    <form>

      <input

        type="text"

        value={searchText}

        placeholder="Search..."

        onChange={(e) => onSearchTextChange(e.target.value)}

      />

    </form>

  );

}

export default function App() {

  const [searchText, setSearchText] = useState("");

  return (

    <>

      <SearchBar searchText={searchText} onSearchTextChange={setSearchText} />

      <p>{searchText}</p>

    </>

  );

}