// file 1
//dir: root/components/template/Footer.jsx
import MailistComponent from '../global/MailistComponent';
export default () => (
<div className="footer">
<div className="col-lg-12 col-md-12 news-letter-component">
<MailistComponent />
</div>
</div>
);
//file 2
//dir: root/components/global/MailistComponent.jsx
import React from 'react';
class MailistComponent extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
render() {
return (
<div id="mc_embed_signup">
<form action="https://example.us14.list-manage.com/subscribe/post?u=xxxxxx&id=xxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" className="validate" target="_blank" noValidate>
<div id="mc_embed_signup_scroll">
<label htmlFor="mce-EMAIL">SUBSCRIBE</label>
<input type="email" name="EMAIL" className="email" id="mce-EMAIL" placeholder="email address" onChange={this.handleChange} value={this.state.value} required />
<div className="styleMailChi" aria-hidden="true">
<input type="text" name="xxx_xxxx_Xxxx" tabIndex="-1" value="" />
</div>
<div className="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button" />
</div>
</div>
</form>
</div>
);
}
}
export default MailistComponent;