I'm using React. I have two files: biologia.js and fleekstorage-functions.js In fleekstorage-functions.js there are Fleek Storage method that can list files from my bucket:
const ListFiles = async () => {
const input = {
apiKey,
apiSecret,
getOptions: [
'bucket',
'key',
'hash',
'publicUrl'
],
};
try {
const result = await fleek.listFiles(input);
return result
} catch (e) {
console.log('error', e);
}
}
And in biologia.js I have:
var articoli = ListFiles()
const Biologia = () => {
return (
<>
<br/><br/>
<h1 className="titolo">Articoli di Biologia:</h1>
<p className="titolo">Qui si parlerà di biologia.</p>
{articoli}
</>
);
}
As you look I wanted to print on a page the output of ListFiles, but console returned me this error:
Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
Could you please help me to print the array and single elements of it on biologia.js?
Your main problem here seems to be that ListFiles() is an async function. In other words, it will always return a Promise, meaning var articoli = ListFiles() will always store a Promise inside articoli.
As indicated by the error you're seeing, a Promise isn't a renderable element. You'll have to wait for the Promise to be resolved, then transform the results as desired into what you want to render. For example, set up your state with a Hook:
const [articoli, setArticoli] = useState(null);
Then you can set the value after the Promise from ListFiles() has resolved:
ListFiles().then((list) => {
// If the file list needs to be converted into JSX, do it here. E.g.:
const mappedList = list.map((item, index) => {
return (
<p key={index}>{item}</p>
);
});
setArticoli(mappedList);
// Otherwise, just set the value directly:
setArticoli(list);
});