basic react form

myform.js

import { Component } from 'react';
import {
  Firstname,
  Middlename,
  Lastname,
  Suffix,
  Title
} from './molecules';

const defaultProps = {
  details: {
    firstname: '',
    middlename: '',
    lastname: '',
    suffix: '',
    title: ''
  },
  ...
};

class MyForm extends Component {
  constuctor(props) {
    this.state = this.getInitialState();
    
    this.changeHandler.bind(this);
  }

  validate() {
    // get validity of form
  }
  
  getInitialState() {
    return Object.assign(defaultProps, this.props.details);
  }
  
  changeHandler(field, value) {
    this.setState({[field]: value});
  }
  
  render() {
    return (
      <div>
        <Title model={this.props.title} changeHandler={this.changeHandler} />
        <Firstname model={this.props.firstname} changeHandler={this.changeHandler} required={true} />
        <Middlename model={this.props.middlename} changeHandler={this.changeHandler} />
        <Lastname model={this.props.lastname} changeHandler={this.changeHandler} required={true} />
        <Suffix model={this.props.suffix} changeHandler={this.changeHandler} />
      </div>
    );
  }
}

export default MyForm;