mapping function doesn't show any results

Question

Here i want to show the list of messages ,but the map seems doesn't work i'm getting the data through over the console.log

please help me where i'm wrong thanks in advance

const [messages, setMessages] =  React.useState([]);

const  handleSendMessage = () =>{
var mesg = document.getElementById('message').value;
socket.emit('send_message', mesg)
  let newState = ([...messages,mesg]);
  setMessages(newState);
}

useEffect(() => {
console.log("messages...", messages)
}, [messages]);


  { messages.map((data,key)=>{                
     <li className="mar-btm">
        {data}
     </li>
   })}

Answer 1

You need to return results.

  { messages.map((data,key)=>{                
     return (<li className="mar-btm">
        {data}
     </li>) 
   })}