CODEWITHSUNDEEP
reactjs
wch
wch

Reputation: 304

data.map is not a function react js

I'm new to react and trying to connect firestore for my project.

I followed the example from the Internet and everything works, the data is deleted and written to the database, also when I change the data they change in the database, but I get errors in the console and a white screen.

Uncaught TypeError: data.map is not a function

If you need any more files or code, I will correct my question, please write which ones I need to add

Also, when loading the page, I get the following error in the console:

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. at wrappedSendMessageCallback

Here is the code that throws the error:

export default function Saved({ data, setData }) {

  function editData(id, newWord, newTranslate, newNote) {
    const editedDataList = async (card) => {
      if (id === card.id) {
        return {
          ...card,
          word: newWord,
          translate: newTranslate,
          note: newNote,
        };
      }
      let newFields = {
          word: newWord,
          translate: newTranslate,
          note: newNote,
      }
      await updateDoc(doc(db, "db-name", id), newFields);
      console.log(newFields)
      return card;
    };
    setData(editedDataList);
  } 
  const deletePost = async (id) => {
    await deleteDoc(doc(db, "db-name", id));
  };
  const dataList = data.map((card) => (
    <SavedData
      id={card.id}
      key={card.id}
      word={card.word}
      translate={card.translate}
      note={card.note}
      editData={editData}
      del={deletePost}
    />
  ));

  return (
    <div>
      <div className="sec-menu"></div>
      <div className="saved-inner">
        {data.length >= 1 ? (
          <div className="saved-list">{dataList}</div>
        ) : (
            <Link className="main-btn" to="/addcard">
              Add
            </Link>
        )}
      </div>
    </div>
  );
}

Here Menu.js code:

function Menu() {

  const [data, setData] = useState([]);
  
  useEffect(() => {
    const q = query(collection(db, "db-name"));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      let wordsArr = [];
      querySnapshot.forEach((doc) => {
        wordsArr.push({ ...doc.data(), id: doc.id });
      });
      setData(wordsArr);
    });
    return () => unsubscribe();
  }, []);
  return (
    <div className="content">
      <AuthContextProvider>
        <Routes>
            <Route
              path="saved"
              element={<Saved data={data} setData={setData} />}
            />
          </Route>
        </Routes>
      </AuthContextProvider>
    </div>
  );
}
export default Menu;

Upvotes: 0

Views: 67

Answers (2)

David T.
David T.

Reputation: 1065

On second glance, the issue is where you call setData(editedDataList). You're passing in a function into this method which is in turn updating data to be a function instead of an array. Try changing, editData() to be something like this:

const editData = async (id, newWord, newTranslate, newNote) => {
  const editedDataList = await Promise.all(data.map(async (card) => {
    let newFields = {
      word: newWord,
      translate: newTranslate,
      note: newNote,
    };

    if (id === card.id) {
      return { ...card, ...newFields };
    }

    await updateDoc(doc(db, "db-name", id), newFields);
    console.log(newFields);
    return card;
  }));

  setData(editedDataList);
};

editedDataList will be an array of the modified cards in the original and setData() should work as expected.

Upvotes: 1

Felipe Santa
Felipe Santa

Reputation: 389

maybe the error occurs because "data" object is not an array.

And check what are you setting on "setData(editedDataList);" instruction

Upvotes: 0

Related Questions