reactjs - How to fetch and display data from documents in subcollection in react

Question

I want to display data from firestore in the simplest way because I'm a beginner in react. Here is the tree of my data of firestore.

collection-[ documentsList [ subcolletcion [ documentsList [ data

question from:https://stackoverflow.com/questions/65870747/how-to-fetch-and-display-data-from-documents-in-subcollection-in-react

Answer 1

To fetch data you can do it like this:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
     const getData = async () => {         
       const result = await axios('https://route_to_backend.com/bla-bla'); 
       setData(result.data);
     }
     getData();
  }, []);

  return (
    <ul>
      {data && data.map(item => (
        <li key={item.id}>
          <div>{item.title}</div>
        </li>
      ))}
    </ul>
  );
}

export default App;

If you provide some example of objects that you receive from server I can write code how you can render it.