Having a couple of compile errors:

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$)$; $//$ Added state for image file

$$ 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 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{'}$api 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 the form

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

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

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

$$ setImage$($null$)$;

$//$ Reset file input

$$ document.getElementById$(\text{'}$fileInput$\text{'}).$value $=\text{'}\text{'}$;

$\}$ 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 $($itemId$,$ updatedData$)=>\{$

$$ try $\{$

$$ const response $=$ await fetch$(`$api url$/$$$\{$itemId$\}`,\{$

$$ method: 'POST',

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

$\})$;

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

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

$$ updateItem$($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$)$;

$\}$

$\}$;

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

$$ try $\{$

$$ const response $=$ await fetch$(`$api url$/$$$\{$itemId$\}`,\{$

$$ method: 'DELETE',

$\})$;

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

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

$$ deleteItem$($itemId$)$;

$$ 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$)$;

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer

Step: 1 Unlock

Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock

Step: 3 Unlock

Students Have Also Explored These Related Programming Questions!

Q:

I need to match this exactly for my react forms assignment and im not sure what to do . Heres my code: import React, { useState } from "react"; export const ShoppingListInput = ( ) = > { const [...

Q:

I need someone to just write this out the way it is supposed to be so I have an answer key; Thanks. Introduction Java is a strongly typed language, meaning that the compiler and JVM enforce proper...

Q:

Could I please get some help on how to create this program? also, can I get an example of the right way to fill in Programmer, section, and due date? I would appreciate it. 1.Start Dev-C++. 2. To...

Q:

Java! Implement a generic version of the Couple class. The following code is an ADT for two String members. To convert this ADT to a generic Couple, you will introduce a type parameter T. This...

Q:

IN C++ CMPT 225 Assignment 2 - Queue You are to implement and test a Queue template class. The class should use a linked list as its underlying representation. This assignment is worth 6% of your...

Q:

In C++ CMPT 225 Assignment 2 - Queue You are to implement and test a Queue template class. The class should use a linked list as its underlying representation. This assignment is worth 6% of your...

Q:

How to answer the question e? 2. Aaron, 34 and Rita, 31 considering to buy their first house. The couple has two kids. Aaron and Rita currently working in Kota Kinabalu. Their current combined gross...

Q:

Hi, please help me with the following problem and please if you are not getting the question don't answer it. This question has a pre coded file that i am attaching the screenshots of that with this...

Q:

Needed help on this one, thankss!! In this assignment you'll write a program that encrypts the alphabetic letters in a file using the Vigenre cipher. Your program will take two command line...

Q:

PLEASE DO QUESTION NUMBER 2 """ALWAYS FRESH NEW ANSWERS Please look at below business operations question #2 and answer it. You are encouraged to use an excel spreadsheet to produce the final result...

Q:

Which of the following statements is true regarding the national debt and federal government? deficits? A. There is a positive relationship between the federal government budget surplus and a federal...

Q:

Pan Corporation purchased 90 percent of Son Corporation's outstanding stock for $7,200,000 cash on January 1, 2011, when Son's stockholders' equity consisted of $4,000,000 capital stock and...

Q:

When a company changes an accelerated method to the straight line method of calculating deprecation expense, this chain should be handled as a prior period adjustment change accounting principle

Q:

What is EOQ? What is it trying to balance? And why is it in conflict with Lean

Previous Question Next Question