<todo-form>
	<form onsubmit = { add }>
		<fieldset role="group">
			<input  type="text" placeholder="Buy milk and eggs..." oninput = { edit }>
			<button disabled = { !state.text } ><i class="fas fa-plus"></i></button>
		</fieldset>
	</form>
	<script>

		export default {
			state : {
				text:''
			},

			edit(e) {
				// update only the text state
				this.state.text =  e.target.value
				this.update()
			},
			add(e) {
				e.preventDefault()
				this.props.add(this.state.text);
			},
			clear(e){
				e.preventDefault();
				this.props.clear()
			}

		}
	</script>
</todo-form>
