react methods snippets

form.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import validator from 'email-validator';
import classnames from 'classnames';

const mockItems = [{
  label: 'topic item one'
}, {
  label: 'topic item two'
}];

const SelectList = ({
  items,
  onClick
}) => {
  const list = items.map((item, index) => {
    return (
      <a onClick={onClick} className="dropdown-item" href="#" key={index}>{item.label}</a>
    );
  });

  return (
    <div className="dropdown-menu dropdown-btn-menu">
      {list}
    </div>
  );
};

SelectList.propTypes = {
  items: PropTypes.array,
  onClick: PropTypes.func
};

// https://facebook.github.io/react/docs/forms.html
class Contact extends Component {
  constructor (props) {
    super(props);

    this.state = {
      value: {}
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmitForm = this.handleSubmitForm.bind(this);
  }

  handleChange (event) {
    // capture form value as user adds to form
    console.log('change', event.target);

    // convert target data into a key value pair
    const name = event.target.name;
    const value = event.target.value;
    const keyValue = {};
    keyValue[name] = value;

    this.setState({
      value: Object.assign({}, this.state.value, keyValue)
    });
    console.log('state', this.state.value);
  }
  
  handleSelect (event) {
    const selectedTopic = event.target.innerHTML;
    this.setState({
      value: Object.assign({}, this.state.value, {
        topic: selectedTopic
      })
    });
    document.getElementById('topic').innerHTML = selectedTopic;
  }

  handleSubmitForm (event) {
    event.preventDefault();
    console.log('submit click', event);

    if (validator.validate(this.state.value.email)) {
      // email address is valid
      console.log('valid!');
    } else {
      console.log('not valid');
      const emailNodeParent = document.getElementById('email').parentNode;
      const currentClassName = emailNodeParent.className;
      emailNodeParent.className = classnames(currentClassName, 'error');
    }
  }

  render () {
    return (
      <div className="container template-with-sidebar-section">
        <div className="margin-bottom-20">
          <h2 className="text-upper">Contact Us</h2>
          <form id="contact-form" name="contact-form" onChange={this.handleChange} onSubmit={this.handleSubmitForm}>
            <div className="form-group">
              <label htmlFor="name">Name</label>
              <input type="text" className="form-control" name="name" id="name" aria-describedby="name" placeholder="" />
            </div>
            <div className="form-group">
              <label htmlFor="email">Email Address</label>
              <input type="email" className="form-control" name="email" id="email" aria-describedby="email" placeholder="Enter email" />
            </div>
            <div className="form-group position-relative">
              <label htmlFor="topic">Topic</label>
              <button className="btn btn-secondary dropdown-toggle dropdown-btn tst_faqdropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="topic">
               See all topics
              </button>
              <SelectList items={mockItems} onClick={this.handleSelect} />
            </div>
            <div className="form-group">
              <label htmlFor="message">Message</label>
              <textarea className="form-control" name="message" id="message" rows="5"></textarea>
            </div>
            <button type="submit" className="btn primary-btn">Submit
              <span className="button-addon icon-Arrow-Chevron-Right"></span>
            </button>
          </form>
        </div>
      </div>
    );
  }
}

Contact.propTypes = {
  contact: PropTypes.object,
  dispatch: PropTypes.func
};

function mapStateToProps (state) {
  return state.contact;
}

export default connect(mapStateToProps)(Contact);