Feedback received: Data not loaded in Edit dialog $($an edit dialog should be used that imports all the current information as the input values so that you can edit rather than starting fresh as if you're creating a new one$)$

Data not automatically updating.

All of the items in the json should be able to be edited and deleted. This would allow to quickly change things on the site without having to edit your json. For this, each item should have it's own edit$/$delete buttons, to access their ids and change the info stored.

How can we incorporate the changes being requested? Thank you so much in advance.

import React, $\{$ useState $\}$ from 'react';

const DataForm $=(\{$ addNewItem $\})=>\{$

const $[$name$,$ setName$]=$ useState$(\text{'}\text{'})$;

const $[$brand$,$ setBrand$]=$ useState$(\text{'}\text{'})$;

const $[$price$,$ setPrice$]=$ useState$(\text{'}\text{'})$;

const $[$image$,$ setImage$]=$ useState$($null$)$;

const $[$error$,$ setError$]=$ useState$($null$)$;

const $[$success$,$ setSuccess$]=$ useState$($false$)$;

const handlelmageChange $=($e$)=>\{$

const file $=$ e$.$target.files$[0]$;

if $($file$)\{$

setImage$($file$)$; $//$ Save the selected file in state

$\}$

$\}$;

const handleSubmit $=$ async $($e$)=>\{$

e$.$preventDefault$()$;

if $(!$name $||!$brand $||!$price $||!$image$)\{$

setError$(\text{'}$All fields, including an image, are required'$)$;

setSuccess$($false$)$;

return;

$\}$

const priceNumber $=$ parseFloat$($price$)$;

if $($isNaN$($priceNumber$))\{$

setError$(\text{'}$Price must be a valid number'$)$; setSuccess$($false$)$;

return;

$\}$

const formData $=$ new FormData$()$;

formData.append$(\text{'}$name$\text{'},$ name$)$;

formData.append$(\text{'}$brand$\text{'},$ brand$)$;

formData.append$(\text{'}$price$\text{'},$ priceNumber$)$;

formData.append$(\text{'}$gear$\text{'},$ image$)$;

setError$($null$)$;

try $\{$

const response $=$ await fetch$(\text{'}$My url', $\{$

method: 'POST',

body: formData,

$\})$;

if $(!$response.ok$)\{$

throw new Error$(\text{'}$Server error'$)$;

$\}$

const data $=$ await response.json$()$;

if $($data$.$success$)\{$

setSuccess$($true$)$;

addNewItem$($data$.$newItem$)$;

$//$ Reset form

setName$(\text{'}\text{'})$;

setBrand$(\text{'}\text{'})$;

setPrice$(\text{'}\text{'})$;

setImage$($null$)$;

document.getElementById$(\text{'}$fileInput$\text{'}).$value $=\text{'}\text{'}$; $//$ Reset file input

$\}$ else $\{$

setError$($data$.$message $||$ 'Failed to add the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$ catch $($err$)\{$

setError$(\text{'}$An error occurred while submitting the form'$)$;

setSuccess$($false$)$;

$\}$

$\}$;

const handleUpdate $=$ async $($itemld$,$ updatedData$)=>\{$

try $\{$

const response $=$ await fetch$(\text{'}$My url$/$$$\{$itemid$\}\text{'},\{$

method: 'POST',

headers: $\{$ 'Content$-$Type': 'application$/$json$\text{'}\},$

body: JSON.stringify$($updatedData$),$

$\})$;

const data $=$ await response.json$()$;

if $($data$.$success$)\{$

updateltem$($data$.$updatedItem$)$;

setSuccess$($true$)$;

$\}$ else $\{$

setError$($data$.$message $||$ 'Failed to update the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$ catch $($err$)\{$

setError$(\text{'}$An error occurred while updating the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$;

$//$ handleDelete function

const handleDelete $=$ async $($itemld$)=>\{$

try $\{$

const response $=$ await fetch$(\text{'}$My url$/$$$\{$itemId$\}\text{'},\{$

method: 'DELETE',

$\})$;

const data $=$ await response.json$()$;

if $($data$.$success$)\{$

deleteltem$($itemld$)$;

setSuccess$($true$)$;

$\}$ else $\{$

setError$($data$.$message $||$ 'Failed to delete the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$ catch $($err$)\{$

setError$(\text{'}$An error occurred while deleting the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$;

return $($