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

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



useEffect(() => {
  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;