import {  useState } from "react";

const DebugMessages =({socket})=>
{
  const [debugMessages, setDebugMessages] = useState([]);

  socket.on("debugMessages", (res) => {
    console.log(res);
    setDebugMessages(res);

  })
    return(
        <ul className="list-group">
           {(debugMessages || []).map((msg) => (
        <li className={"list-group-item " + msg.type }  key={`liMessages_${msg.msg_id}`}>{msg.message}</li>
            ) )}
      </ul>
    )
}
export default DebugMessages;