How to List all files of firebase storage on screen

So, I want to display all files that I have on my firebase storage and I can’t do it. I tried to push it into an array and I only get one file name. I have no ideia how to push all the files into the fileName array.

function Home() {
  const [fileURL, setFileURL] = useState(null);
  const [fileName, setFileName] = useState([{name: "" }]);

  function getMetaData(itemRef) {
    itemRef.getMetadata().then((meta) => {
      setFileName(meta);
    });
  }

  useEffect(() => {
    function getFiles() {
      const storage = firebase.storage().ref("/recursos");
      storage.listAll().then((res) => {
        res.items.forEach((itemRef) => {
          getMetaData(itemRef);
        });
      });
    }
    getFiles();
  }, []);

  return (
    <div className="home">
      <SinapseNav />
      <Container className="d-flex align-items-center justify-content-center mt-4 mb-4">
        <Card>
          <Card.Body>
            <h3 className="text-center mb-4">Pesquisar Recursos</h3>
            {<div>{fileName.name}</div>}
            <Form.Control placeholder='Ex: "Trigonometria"' />
          </Card.Body>
        </Card>
      </Container>
    </div>
  );
}

Answer

In your code now, you get the metadata for each file, and then each time call:

setFileName(meta);

This means that the metadata for each file replaces the metadata that you had for any previous file(s).

To make the code work, you need store the metadata for the files as an array:

const [fileURL, setFileURL] = useState([]);

And then ensure that you add the metadata for all files the array. A common way to do this nowadays is:

setFileName([...fileName, meta]);