import {  useState } from "react";
import DebugList from"./DebugList";

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




  socket.on("debugMessages", (res) => {

    console.log('1',res)
    // // console.log('2',res)
    //  let db=[]
    // let db=[res,...debugMessages]
    // let dbl=db.map((msg)=>{return msg['id']})
    setDebugMessages([res,...debugMessages]);

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