import React, { useState } from 'react';
import './App.css';
function App() {
const [items, setItems] = useState([]);
const [newItem, setNewItem] = useState('');
const addItem = () => {
if(newItem.trim() !== '') {
setItems([...items, newItem]);
setNewItem('');
}
};
return (
<div className="App">
<h1>Shopping List</h1>
<div className="input-section">
<input
value={newItem}
onChange={e => setNewItem(e.target.value)}
placeholder="Add an item"
/>
<button onClick={addItem}>Add</button>
</div>
<ul className="items-list">
{items.map((item, index) => <li key={index}>{item}</li>)}
</ul>
</div>
);
}
export default App;