Skip to content

Instantly share code, notes, and snippets.

@Davisonpro
Created April 18, 2019 14:45
Show Gist options
  • Save Davisonpro/14bcae08c9437849d3624ced62a7ed63 to your computer and use it in GitHub Desktop.
Save Davisonpro/14bcae08c9437849d3624ced62a7ed63 to your computer and use it in GitHub Desktop.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import MailCheck from "react-mailcheck";
import "./styles.scss";
class EmailForm extends Component {
state = {
email: ""
};
handleClickMailcheck = suggestion => {
this.setState({
email: suggestion.full
});
}
handleChange = event => {
this.setState({
email: event.target.value
});
};
render() {
const { email } = this.state;
return (
<div className="form-group">
<MailCheck email={email}>
{suggestion => (
<>
<div className="form-control">
<label>Email</label>
<input type="text" name="email" placeholder="Email" onChange={this.handleChange} value={email}/>
</div>
{suggestion && (
<div className="mailcheck">
Did you mean{" "}
<button
type="button"
className="mailcheck-button"
onClick={() => this.handleClickMailcheck(suggestion)}
>
{suggestion.full}
</button>
?
</div>
)}
</>
)}
</MailCheck>
</div>
);
}
}
ReactDOM.render(<EmailForm />, document.getElementById("app"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment