/*
<style>
	font-size: 25px;
</style>

<div id='container'></div>

*/


/* React: introduction ,  2017-Jun-25 */

function ListItem (props) {
	return (
		<li onClick={props.onClick}>
			{props.item}
		</li>
	);
}

class ShoppingList extends React.Component {
	constructor() {
		super();
		this.state = {
			list: ['Bread', 'Butter', 'Water']
		};
	}

	onClick(index) {
		var newList = this.state.list.slice();
		newList.splice(index, 1);
		this.setState({list: newList});
	}
	
	render() {
		var listItems = [];
		this.state.list.forEach( (currVal, i) => {
			listItems.push(<ListItem item={currVal} onClick={() => this.onClick(i)} />);
		});

		return (
			<div className='shopping-list'>
				<h1>Shopping List for {this.props.name}</h1>
				<ul>
					{listItems}
				</ul>
			</div>

		);
	}
}

ReactDOM.render(
	<ShoppingList name='Charlie' />,
	document.getElementById('container')
);


@@ -344,16 +344,239 @@
 %09%7D;%0A%09%7D%0A%0A
+  addItem() %7B%0A%09%09var item = document.getElementById('listItem').value;%0A%09%09document.getElementById('listItem').value = '';%0A%09%09var newList = this.state.list.slice();%0A    newList.push(item);%0A%09%09this.setState(%7Blist: newList%7D);%0A%09%7D%0A%0A
 %09onClick
@@ -954,16 +954,148 @@
 e%7D%3C/h1%3E%0A
+%09%09%09%09%3Cinput type='text' id='listItem' placeholder='Add item'/%3E%0A%09%09%09%09%3Cbutton type='button' onClick-%7B() =%3E this.addItem()%7D%3EAdd%3C/button%3E%0A
 %09%09%09%09%3Cul%3E
@@ -1233,12 +1233,190 @@
 ainer')%0A);%0A%0A
+%0Afunction Welcome(props) %7B%0A  return %3Ch1%3EHello, %7Bprops.name%7D%3C/h1%3E;%0A%7D%0A%0Aconst element = %3CWelcome name=%22Juliet%22 /%3E;%0AReactDOM.render(%0A  element,%0A  document.getElementById('root')%0A);%0A%0A

Add item.