(sorry for bad english) I'm coding a chat app using React but whenever I try to send line by line message (shift+enter for new line), it doesn't work. It just leaves spaces. But I press in two times to shift+enter, it works Example: I press shift+enter one time:
textarea:
Line 1
Line 2
after send message:
Line 1 Line 2
I press shift+enter twice (It works but I don't want this):
textarea:
Line1
// 1 line blank
Line2
message:
Line1
Line2
But I hate this. Please help me :( Here is code:
REACT:
<textarea
onInput={() => autoGrow}
onChange={(e) => {
setMessage(e.target.value);
}}
autoComplete="off"
onKeyDown={sendMessage}
type="text"
className="overflow-y-auto rounded-l-2xl outline-none h-12 bg-dark-200 pt-3 text-white pl-4 justify-center resize-none flex items-center"
placeholder="Text A Message"
id="message-input"
style={{ width: "90%", backgroundColor: "#323232" }}
>
</textarea>JavaScript:
// States
let [messages, setMessages] = useState([]),
[ message, setMessage ] = useState("");
async function sendMessage(e) {
if (e.keyCode === 13 && !e.shiftKey) {
e.preventDefault();
if (message.replace(/\s/g, "") === "") {
return;
} else {
let data = {
content: message.trim(),
createdTimestamp: moment().locale("fr-FR").calendar(),
id: generateID(),
};
setMessages([...messages, data]);
setMessage("");
e.target.value = "";
}
} else {
setMessage(e.target.value);
}
}