title: Using Array Method inside ASYNC/AWAIT between API calls in Javascript
body: <p>I want to make my code more readable, using async/await instead of using fetch().</p>
  
  <p><strong>My code needs to do the following :</strong></p>
  
  <ol>
  <li>Fetch posts from API</li>
  <li>Select the random post (using find() array method)</li>
  <li>Make another API call based on the selected random post data.</li>
  </ol>
  
  <p><strong>The way I did it using fetch()</strong></p>
  
  <pre><code>componentDidMount() {
      const postsURL = 'https://jsonplaceholder.typicode.com/posts';
      fetch(postsURL)
          .then(res =&gt; res.json())
          .then(posts =&gt; {
              const randomNumber = Math.floor(Math.random() * 100);
              const randomPost = posts.find(post =&gt; post.id === randomNumber);
              fetch(
                  `https://jsonplaceholder.typicode.com/users/${
                      randomPost.userId
                  }`
              ).then(res =&gt; {
                  res.json().then(user =&gt; {
                      this.setState(() =&gt; {
                          return {
                              posts: posts,
                              showingPost: randomPost,
                              showingUser: user
                          };
                      });
                  });
              });
          })
          .catch(err =&gt; console.log(err));
  }
  </code></pre>
  
  <p><strong>Now I'm trying to convert this code altogether into one async function getData()</strong></p>
  
  <pre><code>async getData() {
  
      // get posts
      const getPostsResponse = await fetch(
          'https://jsonplaceholder.typicode.com/posts'
      );
      const posts = await getPostsResponse.json();
  
      // get showingPost
      const randomPost = posts.find(
          post =&gt; post.id === Math.floor(Math.random() * 100)
      );
  
      //get user
      const getUserResponse = await fetch(
          `https://jsonplaceholder.typicode.com/users/${randomPost.userId}`
      );
      const user = await getUserResponse.json();
      // return/setState
      return this.setState(() =&gt; {
          return {
              posts: posts,
              showingPost: randomPost,
              showingUser: user
          };
      });
  }
  
  componentDidMount() {
      this.getData();
  }
  </code></pre>
  
  <p>The problem is - <code>randomPost</code> variable in this async function sometimes returns undefined. It has to be set before moving to the next API call.</p>
  
  <p><strong>How do I properly use find(), or any other method inside async/await function between 2 API calls? Thanks!</strong></p>