Open peterjp80 opened 6 years ago
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: ["test@test.com"]
}
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;
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 "test@test.com".