react

Let's break the implementation down into multiple steps. For the basic implementation, we want to keep a list of emails in your component's state, and when rendering, render a textbox for each email from this list. This will enable us to then easily add and remove textboxes by simply manipulating the DOM itself. For convenience, you can supply each textbox with an additional attribute that stores its index, although it is also possible to calculate this dynamically. At the end, you can render an additional textbox with placeholder text to enter the next email address. This will ensure that there is always at least one textbox (especially at the start before any data is entered), and that the user always has somewhere to type. The index of this placeholder textbox should be N, where N is the number of elements in the email list.

Next, you need to handle the onChange event for each of your textboxes. Here, you should check if the text is empty, and if so, delete the email corresponding to the index of the textbox from your list. Otherwise, update it to the new value to ensure consistency. When you remove an email, you should also focus the placeholder textbox for better usability.

Then we need to handle entry of characters into the placeholder textbox. As soon as the first character is entered into the placeholder textbox, instead of displaying there, you should intercept the event and add an additional entry to your email list. Focus the new textbox so that the remaining input goes there instead, while keeping the placeholder textbox empty. This gives the user the impression that the placeholder textbox turned into a regular textbox and a new placeholder textbox popped in below.

The last implementation detail is pasting a list of emails. To do this, intercept the onPaste event in the placeholder textbox. Keep in mind that you cannot rely on each system using the same line terminators. As such, since emails cannot contain whitespace, you should simply split the pasted content on whitespace characters. Optionally, you can check the emails you get for validity, and then add all the valid emails you have parsed to the email list in your component state. This will then make React create the required textboxes automatically, as with manual input.

One small detail that we need to address is validation. Contrary to popular belief, valid emails are not entirely trivial to validate. However, there exists a regular expression that correctly verifies virtually every email that adheres to standard conventions, namely ^(([^><()[\]\\.,;:\s@"]+(\.[^><()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))
You can use this expression to do your validation.