React Todo

function Item({ text, index, removeItem }) {
	return (
  	<div className="todoitem">
  	  <p>{text}</p>
      <button onClick={e => removeItem(index)}>X</button>
  	</div>
  );
}

function App() {
	const [text, setText] = React.useState("");
	const [items, setItems] = React.useState([]);

	function buttonclick(e) {
  	e.preventDefault();
    if (e == "") {
    	return;
    }
  	setItems([...items, text]);
    setText("");
  }
  
  function removeItem(i) {
  	setItems([...items.slice(0, i), ...items.slice(i + 1)]);
  }

	return (
  	<div>
  	  <input type="text" value={text} onChange={e => setText(e.target.value)} />
      <button onClick={buttonclick}>+</button>
      <ul>
        {items.map((x, i) => <Item text={x} index={i} removeItem={removeItem} />)}
      </ul>
  	</div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))