Code
import { useState } from 'react';
const App = () => {
const [message, setMessage] = useState('');
const [messageList, setMessageList] = useState([]);
return (
<div>
<input
type='text'
value={message}
placeholder='Enter a message'
onChange={(e) => {
setMessage(e.target.value);
}}
/>
<input
type='button'
value='Add'
onClick={() => {
setMessageList([
...messageList,
{
id: messageList.length + 1,
message: message,
},
]);
setMessage('');
}}
/>
<ul>
{messageList.map((m) => (
<li key={m.id}>{m.message}</li>
))}
</ul>
</div>
);
};
export default App;
Challenge
Can squeeze it even more? Waiting for you to try!