title: Trying to pass an array to another component that I'm receiving through an async function
body: <p>Essentially I have a page where I map out a list of files and after the user is down I call them from an api. I then package the file with other meta data. However my issue is that when I pass back my package to my frontend I am getting an error about passing back a promise. I'm using await on async function I know this is causing a promise to be passed to my variable but I am unsure how else to pass back my file with its meta data. Any suggestions for different approaches or a more proper way to use async functions in order to achieve my goal?</p>
  <p>Code:</p>
  <pre><code>const gatherFileNames = async() =&gt;{
     let fams = defineFams()
     let finishedCells = []
     finishedCells = await QueryFiles(fams)
  
     return finishedCells
  }
  
  
  export default async function GenerateGraphPage(){
     let allCells = await gatherFileNames()
  
     return(
        &lt;div&gt;
          &lt;DefineHeader /&gt;
          &lt;CellGraph cells = {allCells}/&gt;
         &lt;/div&gt;
     );
   }
  </code></pre>
  <p>Notes:</p>
  <ul>
  <li>finishedCells is holding an array of objects</li>
  </ul>
  <p>Completed Code for reference:</p>
  <pre><code>export default function GenerateGraphPage(){
  
  const [data, setData] = useState();
  
  useEffect(()=&gt;{
      const getData = async() =&gt; {
          const fileData = await gatherFileNames()
          setData(fileData)
          console.log(fileData)
      }
      getData()
  },[])
  
  
  return(
      &lt;div&gt;
          &lt;DefineHeader /&gt;
          &lt;CellGraph cells={data}/&gt;
      &lt;/div&gt;
  );
  </code></pre>
  <p>}</p>