Are you first timer at Why not join us and start exchange your programming knowledge with everyone. Register today!

Next JS - Example of rendering sub-component in component

0 votes
added Nov 8, 2019 in Next JS by LC Marshal Captain (25,800 points)
// 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 />

//file 2
//dir: root/components/global/MailistComponent.jsx
import React from 'react';

class MailistComponent extends React.Component {
  constructor(props) {
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);

  handleChange(event) {
    this.setState({ value: });

  render() {
    return (
      <div id="mc_embed_signup">
        <form action=";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 className="clear">
              <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button" />
export default MailistComponent;


Please log in or register to response this reference. - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.