Next JS - Example of rendering sub-component in component

Question

// 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&amp;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;