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

Question

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

ERROR

I think, it's because your value it's an object, not an array. You can't map an object. Or, you can try this [value].map((thread, i) => { } — Titus Sutio Fanpula
– Titus Sutio Fanpula, Commented Dec 6, 2020 at 12:41
With that change the error changed to this TypeError: thread is undefined — Erykj97
– Erykj97, Commented Dec 6, 2020 at 12:48
You can make sure the type of your value, is an array or an object. You can look at the result. If it not an array, then you cant map it. You can use Array.isArray(value) to check it — Titus Sutio Fanpula
– Titus Sutio Fanpula, Commented Dec 6, 2020 at 12:57
This returned false, is there any way I could get the data from this object to display it? — Erykj97
– Erykj97, Commented Dec 7, 2020 at 19:13

Dhanujha R · Accepted Answer · 2020-12-06 17:20:45Z

2

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>

answered Dec 6, 2020 at 17:20

Dhanujha R

416 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erykj97 Over a year ago

I get the error saying TypeError: value is undefined

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related