Updating data by URL parameters in the store in React Router

In the previous lesson, we added another route and a page with a form for editing data. We only need to save the data entered into our form.

First, let's add a function to update product data updateProduct in forStorage.js. We need to pass the id product and the changed data to it:

export async function updateProduct(id, updates) {
	await someNetwork();
}

Next, we get products from the storage by the key 'products' and find the one we are changing by its id. In case of failure, we throw an error:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);				
}

Then all we have to do is make changes to the found product and overwrite the updated list in the store using our setProducts function:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

Take the app you created in the previous lessons. Using the lesson materials, add a function updateStudent to the forStorage.js file to update the student data in the storage.