Not able to clear the Input box in React

JavaScript
1

Hi,

I am working on a React app where I have 2 input fields in AddDetails modal window. Only when both the input fields have some data, the add button at the top right will be enabled. Additionally, the 2nd input field saves the data to the component state depending on the input. If it is a number, it will save in number variable, for everything else, it will be saved in the email variable of the state.

Problem: When I add an input in the 2nd input field, the add button is enabled but when I press the delete ket to clear the input, it gets stuck at one letter. For example if I have entered “Rahul” and on multiple delete key press event, the value is stuck at “R”. It’s been hours and I am not able to figure this thing out :frowning: :unamused:

Link to the code: https://stackblitz.com/edit/godutch-app?file=Components%2FAppDashboard.js
FileName:: AppDashboard.js
Modal Component: AddDetails line 508-656
UI navigation: Click on 3 dots at top right corner of app, click on “add friend”, add a name and click " Add name to Go-Dutch" and the AddDetails modal component will open.
Any help/hint would be appreciated.

Thank you!

2

Looking at your code and the first thing i wanna ask is why did you put everything in one file?

3

Splitting the code is the next thing I want to do now that the codebase is increasing. Just finishing off these tiny bugs before I start refactoring