Unable to populate with initial values

[peterjp80]

I have a requirement that the react-multi-email field show some existing email addresses, but I am unable to populate the field with initial values. My container loads the component and shows the field without any javascript errors, and the react-multi-email field shows, but it is empty. Below is the code for the component. I am setting the "emails" attribute to an array with a single value of "[email protected]".

import PropTypes from "prop-types";
import React from "react";
import ReactModal from "react-modal";
import { ReactMultiEmail } from 'react-multi-email';

const TestMultiEmailModal = ({ showModal }) => {
    return (
        <ReactModal contentLabel="Submit Internally" isOpen={showModal} className="react-modal" overlayClassName="react-modal-overlay">
            <ReactMultiEmail
                style={{}}
                emails={["[email protected]"]}
                onChange={_emails => {
                    this.setState({ emails: _emails });
                }}
                getLabel={(
                    email,
                    index,
                    removeEmail,
                ) => {
                    return (
                        <Label key={index}>
                            {email}
                            <Icon name="delete" onClick={() => removeEmail(index)} />
                        </Label>
                    );
                }}
            />
        </ReactModal>
    );
};

TestMultiEmailModal.propTypes = {
    showModal: PropTypes.bool
};

export default TestMultiEmailModal;

[thomasJang]

The reason why it does not work is that the value of ReactMultiEmail.props.email is not managed by state.
It is recommended to manage the value of emails as state as the following code.
Have a happy coding.

import PropTypes from "prop-types";
import React from "react";
import ReactModal from "react-modal";
import { ReactMultiEmail } from 'react-multi-email';


class TestMultiEmailModal extends React.Component {

  state = {
    emails: ["[email protected]"]
  }

  render(){
    const {showModal} = this.props;
    const {emails} = this.state;

    return (
      <ReactModal contentLabel="Submit Internally" isOpen={showModal} className="react-modal" overlayClassName="react-modal-overlay">
          <ReactMultiEmail
              style={{}}
              emails={emails}
              onChange={_emails => {
                  this.setState({ emails: _emails });
              }}
              getLabel={(
                  email,
                  index,
                  removeEmail,
              ) => {
                  return (
                      <Label key={index}>
                          {email}
                          <Icon name="delete" onClick={() => removeEmail(index)} />
                      </Label>
                  );
              }}
          />
      </ReactModal>
    );
  }
  
}

TestMultiEmailModal.propTypes = {
    showModal: PropTypes.bool
};

export default TestMultiEmailModal;