how to check if input is clear (react redux) - reactjs

Question

im trying to create a discord clone, and when i hit enter when the input is empty it shows an empty message, any idea how to prevent that from happening? im new to react, firebase and redux.
const user = useSelector(selectUser);
const channelId = useSelector(selectChannelId);
const channelName = useSelector(selectChannelName);
const [input, setInput] = useState("");
const [messages, setMessages] = useState([]);
useEffect(() => {
if (channelId) {
db.collection('channels')
.doc(channelId)
.collection('messages')
.orderBy('timestamp', 'desc')
.onSnapshot((snapshot) =>
setMessages(snapshot.docs.map((doc) => doc.data()))
);
}
}, [channelId])
const sendMessage = (e) => {
e.preventDefault();
db.collection('channels').doc(channelId).collection('messages').add({
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
message: input,
user: user,
});
setInput('')
}
return (
<div className="chat">
<ChatHeader channelName={channelName}/>
<div className="chat__messages">
{messages.map((message) => (
<Message
timestamp={message.timestamp}
message={message.message}
user={message.user}
/>
))}
</div>
<div className="chat__input">
<AddCircleIcon fontSize="large"/>
<form>
<input
id="input"
value={input}
disabled={!channelId}
onChange={e => setInput(e.target.value)}
placeholder={`Message #${channelName}`}
/>
<button onClick={sendMessage} className="chat__inputButton" type="submit">
Send Message
</button>
</form>
<div className="chat__inputIcons">
<CardGiftcardIcon fontSize="large"/>
<GifIcon fontSize="large"/>
<EmojiEmotionsIcon fontSize="large"/>
</div>
</div>
</div>
)
}
export default Chat

Answer 1

All you need to do is prevent your submit function from calling firebase if your input is empty.
const sendMessage = (e) => {
e.preventDefault();
if (input.length <= 0) return; // This will end the function here if your input is empty
db.collection('channels').doc(channelId).collection('messages').add({
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
message: input,
user: user,
});
setInput('')
}

Answer 2

Just check if is some value in it. Empty string is falsable so you can check it in one line.
<input onChange={e => e.target.value && setInput(e.target.value)}/
But in your case probably you send your form on enter. So you can block sending form with empty input by setting validation pattern
<input pattenr=".+" />
or make validation in sumbmit function.