-In React Hook Form, we have the 2 fields SKU/MPN and Manufacturer -SKU/MPN is an input field, and Manufacturer isa drop-down field -The user will enter the SKU ID and click the search button
-case 2 in the case of multiple data points comes from the API :
* Show the popup or hit the icon to select the Manufacturer
* The user selects the Manufacturer
* Check the Manufacturer in my state, if it exists, add the same Manufacturer
* Fill the data ACC in the respective field, like description, will add ACC to it.
* if it does not exist, create a new one, Manufacturer on the name (like add the key of the new Manufacturer )
I'll create a React Hook Form implementation with the SKU/MPN search functionality and Manufacturer dropdown as you described. The solution will handle both single and multiple result cases from the API.
This implementation handles the SKU/MPN search functionality with the two cases you described:
Form Setup:
Case 1 - Single Result:
Case 2 - Multiple Results:
Manufacturer Management:
You can replace the mock fetchSkuData function with your actual API call while keeping the same response structure.
IF RESULT IS error : "Not Found" message : "Product with SKU "P00055" not found" statusCode : 404
GIVE THE ACTION POPUP
I'll update the code to handle the "Not Found" error case and show an action popup when the API returns a 404 error.
Now the application will handle the 404 "Not Found" error case by:
Showing Error Popup: An AlertDialog popup appears with:
The error handling is flexible and will work with your actual API response structure. Just replace the mock fetchSkuData function with your real API call, and the error handling will automatically catch and display 404 errors or any other API errors.