CODEWITHSUNDEEP
node.jsreactjsobjectgoogle-cloud-firestore
Erykj97
Erykj97

Reputation: 168

React display data from object TypeError: value map is not a function

Getting "TypeError: value is undefined" error when trying to render the data from the value object, when I console log value the object does show.

CODE

import React from "react";
import { useParams } from "react-router-dom";
import {
  useDocumentData,
} from "react-firebase-hooks/firestore";
import firebase from "../firebase";

const firestore = firebase.firestore();

const Threads = () => {
  const { threadId } = useParams();
  const [value, loading, error] = useDocumentData(firestore.collection("threads").doc(threadId));
  console.log(value);
  return (
    <div>
      {value.map((thread, i) => (
        <div>
          <h1>{thread.title}</h1>
          <p>{thread.desc}</p>
        </div>
      ))}
    </div>
  );
};

export default Threads;

CONSOLE

enter image description here

ERROR

enter image description here

Upvotes: 1

Views: 1293

Answers (1)

Dhanujha R
Dhanujha R

Reputation: 41

The variable value is a object. Map function in JS is applicable only for arrays. So try this.

        <div>
          <h1>{value.title}</h1>
          <p>{value.desc}</p>
        </div>

Upvotes: 2

Related Questions