Hello!

So$,$ I need to be able to add an image and edit and delete what the user has added. This code doesn't seem to work:$$

Ok so i need to be able to add an image and edit and delete what the user has added. This is the code i have to let user add an image but it doesnt work:$$

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 handleImageChange $=($e$)=>\{$

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

$$ if $($file$)\{$

$$ setImage$($file$)$; $//$ Save the file directly to the 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{'}$image$\text{'},$ image$)$;

$$ setError$($null$)$;

$$ try $\{$

$$ const response $=$ await fetch$(\text{'}$ Enter the url here $\text{'},\{$

$$ method: 'POST',

$$ body: formData, $//$ Send FormData directly

$\})$;

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

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

$$ setSuccess$($true$)$;

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

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

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

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

$$ setImage$($null$)$; $//$ Reset the image state

$\}$ else $\{$

$$ setError$(\text{'}$Failed to add the item'$)$;

$$ setSuccess$($false$)$;

$\}$

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

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

$$ setSuccess$($false$)$;

$\}$

$\}$;

$$ return $($

$$