reactdemo.tsx

import React, { useReducer, useState } from 'react';

interface Message {
  from: string;
  message: string;
}

interface ChatState {
  messages: Message[] | null;
}

type ChatStateAction =
  | { type: "SENT_MESSAGE", payload: Message };

function chatReducer(state: ChatState, action: ChatStateAction): ChatState {
  switch(action.type) {
    case "SENT_MESSAGE":
      return { ...state, messages: [...(state.messages ?? []), action.payload] }
    default:
      return state;
  }
}

const initialState: ChatState = {
  messages: null
}

export default function App() {
  const from = "Mike";
  const [messageText, setMessageText] = useState("");
  const [state, dispatch] = useReducer(chatReducer, initialState);
  function handleInput(e) {
    setMessageText(e.target.value);
  }
  function handleSendMessage() {
    setMessageText("");
    dispatch({ type: "SENT_MESSAGE", payload: { from, message: messageText } });
  }
  return (
    <div className='App'>
      <div style={{height:"400px", width: "400px", backgroundColor: "white"}}>
        <ul>{state.messages?.map((msg, index) => (
          <div key={index}>
            <p>{msg.from}</p>
            <p>{msg.message}</p>
          </div>
        ))}</ul>
      </div>
      <input onChange={handleInput} value={messageText} type="text" />
      <button onClick={handleSendMessage}>Send Message</button>
    </div>
  );
}

// Log to console
console.log('Hello console');