I'm trying to do twitter-clone, but when i try to create function that will send post on page i've get error

*Property 'add' does not exist on type 'CollectionReference'. *

What i need to do? Do someone have link or something that?

Also i need to do post adding without using firebase

import { Avatar, Button } from "@material-ui/core";
import "../Styles/TweetBox.css";
import { AvatarIcon } from "./AvatarIcon";
import { db } from "../db/Firebase";
import React from "react";
import {collection, getDocs} from "firebase/firestore";
import Post from "./Post";
import { sendTweetProps } from "../types/Types";

function TweetBox(){
  const [tweetMessage, setTweetMessage] = React.useState("");
  const [tweetImage, setTweetImage] = React.useState("");
  const userCollectionRef = collection(db, "posts");

  const sendTweet = () => {
    const newTweet: sendTweetProps = {
      displayName: "suichanwa",
      username: "name",
      verified: false,
      text: tweetMessage,
      image: tweetImage,
      avatar: AvatarIcon,
    };
    userCollectionRef.add(newTweet);
    setTweetMessage("");
    setTweetImage("");
  }
   

  return(
    <div className="tweetBox">
      <form>
        <div className="tweetBox__input">
          <Avatar src={AvatarIcon}/>
          <input placeholder="What's happening?" type="text" className="inputts"/>
        </div>
        <Button onClick={sendTweet} className="tweetBox__tweetButton">
          Tweet
        </Button>
      </form>
    </div>
  )
}

export default TweetBox;

CodePudding user response：

The SDK v9 is modular. You need to import the methods you want to use.

Importing the add() method as follows should do the trick:

import {collection, getDocs, add} from "firebase/firestore";