Let me start with my code, and then will describe my problem:

  function ArrayList6(props) {
  const title = "Results";

  let parseArray = [];

  const thisFunc = async () => {
    const parseTest = new Parse.Query("Users");
    parseTest.equalTo("LastName", "Jenkins");
    let queryResults = await parseTest.find();

    for (const item of queryResults) {
        parseArray.push(item.get('LastName'))
    }

    console.log("data in function: " + parseArray) 
  };

  thisFunc();
    
  return (
    <div className="App">
      <NavBar title={title} />
      <ul className="no-bullets">
        {parseArray.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ArrayList6;

In short, the problem is that when I fetch my API data Asynchronously, the code keeps running and hits the return portion before the API has fetched the needed data - this is a problem because the returned portions depends on the fetched API data.

If you run the code, you can see that the console displays the fetched data, but the main component does not return it.

I'd be happy to set the API fetch so it's not async, and then the rest of the code waits until it's complete, but I haven't figured out how to do that. If someone who is wiser and smarter than I am, I would greatly appreciate it.