traintocode

Keeping Messages in State

So far you have created some static markdown to display chat messages and an input box in the UI. Next you are going to implement the useState() hook in React to store the chat messages in an array in memory

const [ value, setValue ] = useState<string[]>(['item', 'item']);

Exercise

1. Create a Typescript type called Message for your messages. The type should declare two fields called text and sender.

2. Use the useState() hook to save an array of messages, where each message is an object of your new Message type.

3. Set the initial value of your messages array inside the useState() hook to an array of sample message objects containing test data.

4. Render your message array to the page instead of your test <p> components.

You cannot do the coding exercises on this device, visit this page on a larger screen.

App.tsx

⋮