Mis datos en mi aplicación To-Do no aparecerán en la base de datos de Firestore. Recibo una advertencia en la terminal que dice "ADVERTENCIA en src/components/AddTodo.js Línea 3:10: 'colección' está definida pero nunca usó no-unused-vars"

En la consola también se lee Uncaught (en promesa) TypeError: firebase__WEBPACK_IMPORTED_MODULE_1 _.db.collection no es una función.

AddToDo.JS

 import React from 'react'; import { db } from '../firebase'; import { collection, addDoc } from 'firebase/firestore'; export default function AddTodo() { const [title, setTitle] = React.useState(''); const handleSubmit = async (e) => { e.preventDefault(); if (title !== '') { await addDoc(db.collection('todos'), { //<----Problem???--->// title, completed: false, }); setTitle(''); } }; return ( <form onSubmit={handleSubmit}> <div className="input_container"> <input type="text" placeholder="Enter todo..." value={title} onChange={(e) => setTitle(e.target.value)} /> </div> <div className="btn_container"> <button>Add</button> </div> </form> ); }

Aplicación.js

 import './App.css'; import React from 'react'; import Title from './components/Title'; import AddTodo from './components/AddTodo'; function App() { return ( <div className="App"> <div> <Title /> </div> <div> <AddTodo /> </div> </div> ); } export default App;

base de fuego.js

 import { initializeApp } from 'firebase/app'; import { getFirestore } from 'firebase/firestore'; //Firebase configuration const firebaseConfig = { apiKey: 'AIzaSyCqranC2Lg9HXqoPPVAB3BVQqJFMAi569E', authDomain: 'fir-todo-ee3df.firebaseapp.com', projectId: 'fir-todo-ee3df', storageBucket: 'fir-todo-ee3df.appspot.com', messagingSenderId: '861076554800', appId: '1:861076554800:web:070895ff68a12d187f99f5', }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); export { db };

Título.js

 import React from 'react'; export default function Title() { return ( <div className="title"> <h1>Todo App</h1> </div> ); }