TypeError: u.indexOf is not a function for Reactjs and Firebase

user_12973512 0
Viewed 2304

I am running into the following Error while following this tutorial https://www.youtube.com/watch?v=QiTq5WrWoJw&t=8176s

I am having issues connecting my individual messages into my firebase application. My error in the console focuses on the following code.

I am trying to send a message within in an indvidiual "room" within firebase so a collection of rooms with unique messages within each room.

function ChatInput(channelName, channelId) {

    const [input, setInput] = useState('');

    const sendMessage = (e) => {
        e.preventDefault(); //prevents refresh of the page

        if(!channelId) {
            return false;
        }
            db.collection("rooms").doc(channelId).collection("messages").add({
              message: input,
              timestamp: firebase.firestore.FieldValue.serverTimestamp(),
              user: 'Daniel Peters',
              userImage:'https://wallpapercave.com/wp/j8Sd6Uv.jpg',

            });

            setInput('');
    };

    return (
        <ChatInputContainer>
            <form>
                <input value={input} onChange={(e) => setInput(e.target.value)} placeholder= {`Message #${channelName}`} />
                <Button hidden type='submit' onClick={sendMessage}>
                    SEND
                </Button>
            </form>



        </ChatInputContainer>
    )
}

export default ChatInput;

I have tried different version of redux and firebase to see if that was the issue, however the issue is obviously not resolved. Any guidance would be great!

redux firebase styled-components reactjs
3 Answers

I just faced this issue and eventually my "mistake" Was that I was trying to use numeric ids as firestore document keys.

So this one gave that u.indexOf is not a function error:

      let ref = db.collection(`userPreferences/${userId}/venues`).doc(venue.id);

Where as this one worked:

  let ref = db.collection(`userPreferences/${userId}/venues`).doc(`${venue.id}`);

I just surrounded the second one in quotes to make it a string. Hope that saves someone's day!

user_12911220

I fixed this error by changing my key name from a number to a string:

export const addRecord = async () => {
    for (let i = 1; i < 3; i++) {
        const keyName = i + '' // converting the number to a string is the solution!
        await setDoc(doc(db, "names", keyName), {
            name: "hello world",
        })
    }
}
user_147556600

In this case Make the channelId string and then pass to doc()

Just like:

function ChatInput(channelName, channelId) {

const [input, setInput] = useState('');

const sendMessage = (e) => {
    e.preventDefault(); //prevents refresh of the page

    if(!channelId) {
        return false;
    }
        db.collection("rooms").doc(`${channelId}`).collection("messages").add({
          message: input,
          timestamp: firebase.firestore.FieldValue.serverTimestamp(),
          user: 'Daniel Peters',
          userImage:'https://wallpapercave.com/wp/j8Sd6Uv.jpg',

        });

        setInput('');
};

return (
    <ChatInputContainer>
        <form>
            <input value={input} onChange={(e) => setInput(e.target.value)} placeholder= {`Message #${channelName}`} />
            <Button hidden type='submit' onClick={sendMessage}>
                SEND
            </Button>
        </form>



    </ChatInputContainer>
)

}

export default ChatInput;

user_152038370
Related