import React from 'react';
import PropTypes from 'prop-types';

class Item extends React.Component {
	constructor(){
		super();

		this.onEdit = this.onEdit.bind(this);
		this.onDelete = this.onDelete.bind(this);
			
	}

	onEdit(){
		console.log('edit: ' + this.props.summary);
		this.props.setEdit(true, this.props.summary);
	}

	onDelete(){
		this.props.onDelete(this.props.itemId);
	}

	render() {
		return (
			<div>
				<h3>Item/Task(ID): {this.props.summary}</h3>
				<ul> 
					<li>Summary: {this.props.summary}</li>
					<li>Phase: {this.props.phase}</li>
					<li>Feature: {this.props.feature}</li>
					<h3>Budget Hours</h3>
					<ul>
						<li>Phase: {this.props.budgetHours.column}</li>
						<li>Hours: {this.props.budgetHours.value}</li>
					</ul>
					<h3>Descriptions</h3>
					<ul>
						<li>
							Workplan: {this.props.descriptions.workplan}
						</li>
						<li>
							Budget: {this.props.descriptions.budget}
						</li>
						<li>
							Assumptions: {this.props.descriptions.assumptions}
						</li>  
						<li>
							Exclusions: {this.props.descriptions.exclusions}
						</li>
					</ul>
					<li>Tags: {this.props.tags}</li>
				</ul>
				<button onClick={this.onEdit} className="btn btn-primary">Edit Item</button>
				<button onClick={this.onDelete} className="btn btn-primary">Delete Item</button>
			</div> 
		)
	}
}

Item.propTypes = {
	summary: PropTypes.string.isRequired,
	phase: PropTypes.string.isRequired,
	feature: PropTypes.string.isRequired,
	tags: PropTypes.string.isRequired, 
  itemId: PropTypes.number.isRequired,
}



export default Item;

@@ -20,16 +20,47 @@
 react';%0A
+import ItemForm from './Form';%0A
 import P
@@ -245,114 +245,110 @@
 %09%09%09%0A
-%09%7D%0A%0A%09onEdit()%7B%0A%09%09console.log('edit: ' + this.props.summary);%0A%09%09this.props.setEdit(true, this.props.summary
+    this.state = %7B%0A      isEditing: false,%0A    %7D;%0A%09%7D%0A%0A%09onEdit()%7B%0A    this.setState(%7B isEditing: true %7D
 );%0A%09
@@ -396,16 +396,21 @@
 s.props.
+item.
 itemId);
@@ -473,32 +473,37 @@
 D): %7Bthis.props.
+item.
 summary%7D%3C/h3%3E%0A%09%09
@@ -540,16 +540,21 @@
 s.props.
+item.
 summary%7D
@@ -587,16 +587,21 @@
 s.props.
+item.
 phase%7D%3C/
@@ -634,16 +634,21 @@
 s.props.
+item.
 feature%7D
@@ -711,32 +711,37 @@
 se: %7Bthis.props.
+item.
 budgetHours.colu
@@ -778,16 +778,21 @@
 s.props.
+item.
 budgetHo
@@ -887,32 +887,37 @@
 an: %7Bthis.props.
+item.
 descriptions.wor
@@ -965,32 +965,37 @@
 et: %7Bthis.props.
+item.
 descriptions.bud
@@ -1046,32 +1046,37 @@
 ns: %7Bthis.props.
+item.
 descriptions.ass
@@ -1141,16 +1141,21 @@
 s.props.
+item.
 descript
@@ -1221,16 +1221,21 @@
 s.props.
+item.
 tags%7D%3C/l
@@ -1417,210 +1417,177 @@
 on%3E%0A
-%09%09%09%3C/div%3E %0A%09%09)%0A%09%7D%0A%7D%0A%0AItem.propTypes = %7B%0A%09summary: PropTypes.string.isRequired,%0A%09phase: PropTypes.string.isRequired,%0A%09feature: PropTypes.string.isRequired,%0A%09tags: PropTypes.string.isRequired, %0A  itemId: 
+        %7Bthis.state.isEditing && (%0A          %3CItemForm %0A            item=%7Bthis.props.item%7D%0A          /%3E%0A        )%7D%0A%09%09%09%3C/div%3E %0A%09%09)%0A%09%7D%0A%7D%0A%0AItem.propTypes = %7B%0A  item: React.
 Prop
@@ -1596,14 +1596,14 @@
 pes.
-number
+object
 .isR

Use item prop, render edit form per item