Item.js

import React from 'react';

const Item = React.createClass({
  handleClick() {
    this.props.itemClicked(this.props.index);
  },

  render() {
    return <li onClick={this.handleClick} className={this.props.className}>
      <span>{this.props.item.email}</span>
      <span>{this.props.item.name}</span>
      <span>{this.props.item.text}</span>
    </li>;
  }
});

module.exports = Item;

ItemInput.js

import React from 'react';

const ItemInput = React.createClass({
  getInitialState() {
    return {'email': null, 'name': null, 'text': null};
  },

  handleChange(event) {
    this.state[event.target.id] = event.target.value;
    this.setState(this.state);
  },

  handleClick() {
    console.log(this.state);
    this.props.addItem(this.state);
    this.setState({
      'email': null,
      'name': null,
      'text': null
    });
  },
  render() {
    return <div>
      <div className='form-group'>
        <label htmlFor='email'>Email</label>
        <input type="text" id='email' name='email' 
          className='form-control'
          onChange={this.handleChange} 
          value={this.state.email} />
      </div>
      <div className='form-group'>
        <label htmlFor='name'>Name</label>
        <input type="text" id='name' name='name'
          className='form-control'
          onChange={this.handleChange} 
          value={this.state.name} />
      </div>
      <div className='form-group'>
        <label htmlFor='text'>Text</label>
        <textarea id='text' name='text'
          className='form-control'
          onChange={this.handleChange} 
          value={this.state.text}/>
      </div>
      <div className='form-group'>
        <button onClick={this.handleClick} className='btn btn-success'>Add Item</button>
      </div>
    </div>;
  }
});

module.exports = ItemInput;