I have a nested array within the individual items in a collection.

{
"id": "RpFRcKLIgELlBLgIOJM4",
"Category": "",
"Method": "",
"User": "rWFZhAKk9eOSIIFoP0DqqvrC6WJ3",
"Foods": [
    {
        "Weight": 1.065,
        "label": "Milk - Long Life (1 Litre) (1.065)",
        "value": "Milk-LongLife(1Litre)"
    },
    {
        "label": "Blueberries (0.125)",
        "value": "Blueberries",
        "Weight": 0.125
    }
],
"Name": "456",
"Serves": ""
}
{
"id": "WQ6KBLevFsCdV73j4KU4",
"Category": "",
"Name": "123",
"Foods": [
    {
        "value": "Wine-White",
        "label": "Wine - White"
    },
    {
        "value": "Milk-LongLife(1Litre)",
        "label": "Milk - Long Life (1 Litre)"
    }
],
"Serves": "",
"User": "rWFZhAKk9eOSIIFoP0DqqvrC6WJ3",
"Method": ""
}

const useItemsMeals = () => {
const user = firebase.auth().currentUser;
const user1 = user.uid;
  const [items, setItems] = useState([]); //useState() hook, sets initial state to an empty array
  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("meals")
      .where("User", "==", user1)
      .orderBy("Category", "asc")
      .onSnapshot(snapshot => {
        const listItemsMeals = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setItems(listItemsMeals);
        console.log(listItemsMeals);
      });
    return () => unsubscribe();
  }, []);
  return items;
};

I am having a tough time trying to display items from the 'Foods' array, am currently using for my return:

const listItemMeals = useItemsMeals();
{listItemMeals.map(item => (
      <TableRow hover key={item.id} id={item.id}>
      <TableCell>{item.Category}</TableCell>
      <TableCell>{item.Name}</TableCell>
      <TableCell>{item.Foods}</TableCell>

When doing this it tells me:

Error: Objects are not valid as a React child (found: object with keys {label, value}). If you meant to render a collection of children, use an array instead.

I think I need to map this nested array again somehow - but for the life of me - cannot figure it out!

CodePudding user response：

You're almost there.

Your useItemsMeals functions loads the data from Firestore, and sets it correctly into the items variable in the state to render it. But then you use const listItemMeals = useItemsMeals() in your rendering code, which messes things up.

You should not try to return any value from useItemsMeals, and instead solely rely on the items variable from the state to pass the information between the database and the rendered.

So:

// return items;