'Create a mutlple email field input in react.js

I am new to react and would like to create an entry field where a user can enter multiple email address

So far, I have an email field

<TextValidator
     id="email"
     aria-label="email"
     label="Email address used to register"
     required
     name="email"
     value={this.state.email ? this.state.email : ""}
       onChange={this.handleChange({
                  name: "email",
                   index: 0
                 }).bind(this)}
                 autoComplete="email"
                 margin="normal"
                 variant="outlined"
                 fullWidth
                 validators={["required", "isEmail"]}
                 errorMessages={[
                    "this field is required",
                    "email is not valid"
                 ]}
  />

I would like either a way to enter multiple emails in the single field or maybe an add/remove button to do it.

This is want my input look like at the moment

Thanks for your help

reactjs

Solution 1:^[1]

Try React multi-email - this is exactly what you're looking for.

Here's a link to the online demo where you can check it out. Hope this helped!

Solution 2:^[2]

I think to achieve that, you will need a stateVariable that holds the current text being entered by the user which you keep checking to see if its a valid email or alternatively check if the next key entered is a space and if so, add it to an array of existing emails.

To display the entered emails, you will need to use an editable div and a separate component that shows a single email, then loop through entered emails and display them as components inside the mail editable div

Something like

<EditableDiv>
  { email in emails
    <Email email >
  }
  <CurrentEntry {EmailBeingEntered} />
</EditableDiv>

The above ain't really react but just an overview of what it might look like

Solution 3:^[3]

A simple react component to format multiple email as the user types.

Simple code No dependency Small size Simple customization

demo https://codesandbox.io/s/jpvjk8m5o9

https://www.npmjs.com/package/react-multi-email

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	SKD
Solution 2	Mpwanyi Samuel
Solution 3	Mahmoud Ahmed

'Create a mutlple email field input in react.js

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]