TypeError: u.split is not a function

0
votes

I am working on a whatsapp clone app using react, firebase enter image description here

messages, user name, timestamp are recieved from firestore using this code:

<div className="chat__body">
                {messages.map(message => (
                    <p className={`chat__message ${true && "chat__reciever"}`}>
                        <span className="chat__name">{message.name}</span>
                        {message.message}
                        <span className="chat__timestamp">
                            {new Date(message.timestamp?.toDate())
                                .toUTCString()}
                        </span>
                    </p>
                ))}
            </div>
            <div className="chat__footer">
                <InsertEmoticonIcon />
                <form >
                    <input value={input} onChange={(event) => 
setInput(event.target.value)} placeholder="Type a message" type="text" />
                    <button onClick={sendMessage} type="submit">Send </button>
                </form>
                <MicIcon />
            </div>

The input field texts are captured in {sendMessage} which are viewed in console as input value.

//probably sendMessage onClick event is causing this error.

 const sendMessage = (event) => {
        event.preventDefault();
        console.log("You typed ", input);

        db.collection('groups').doc(groupId)
            .collection(messages).add({
                message: input,
                name: user.displayName,
                timestamp: firebase.firestore.FieldValue.serverTimestamp(),
            });
        setInput('');
    }

as the firestore is set, the inputs are set as messages, name and timestamps set from google authentication in collection like this:

enter image description here

When I type on the input field, those inputs are supposed to be showed in chat instead showing error:TypeError: u.split is not a function enter image description here enter image description here

2
javascriptreactjsfirebasegoogle-cloud-firestoretypeerror
You should log what u is just prior to using it to understand the issue. The error means that u is not a string or an array, where .split() can be used. - Scott Marcus
Have you checked the error stack? Is any of your project files mentioned? If so, could you included the code (from your project) that is referenced in the error stack? (Preferably adding a comment to signify what line of code is responsible for the error.) - 3limin4t0r
@3limin4t0r modified and added error stack. probably sendMessage onClick event is causing this error. though this onClick event works on console log - user8303579
@ScottMarcus Yes i have console logged the input which works fine but doesn't shows on chat. I have modified now - user8303579
i have console logged the input which works fine <-- What does this mean? What, exactly, do you get when you log u? - Scott Marcus

2 Answers

0
votes

You're passing messages as an array, not as a string.

Change your code to

db.collection("groups").doc(groupId).collection("messages").add({
  message: input,
  name: user.displayName,
  timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
0
votes

Looking at the error stack the first project file seems to be:

...
at e.collection (...)
at sendMessage (Chat.js:47)
...

Since you supplied the sendMessage definition I will assume that the definition is located in Chat.js. You haven't given us any line numbers to work with, however the line above "at sendMessage" tells us what function/method you called in sendMessage that caused the error. In your case this was a collection call.

Looking at your code:

const sendMessage = (event) => {
  event.preventDefault();
  console.log("You typed ", input);

  db.collection('groups').doc(groupId)
    .collection(messages).add({
      message: input,
      name: user.displayName,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
    });
  setInput('');
}

You make 2 collection calls. .collection('groups') and .collection(messages). Assuming that db is an Firestore instance the first collection call has the following signature:

collection ( collectionPath : string ) : CollectionReference < DocumentData >

The second collection call is called upon a DocumentReference but has the same signature.

Your first collection call provides a string 'groups' as argument which looks fine. Your second collection call provides messages as the argument, which is probably an array (you call messages.map in your first code block). Since the method is expecting a string it throws an error.