title: Fetching the data from second api based on the response from the first api React js
body: <p>I was planning to call the second api using the data from the first api in my react project i tried using a single useState and chain the promises using axios but it isn't seems to be working as i want to basically filter out the data from the second api based on the first api id value</p>
  <p>Api 1</p>
  <pre><code>[{
      id: 01,
      title: Post title One,
      external_id: 101
  },
  {
      id: 02,
      title: Post title Two,
      external_id: 102
  },
  {
      id: 03,
      title: Post title Three,
      external_id: 103
  }]
  </code></pre>
  <p>Api 2</p>
  <pre><code>[{
      id: 101,
      image: Image Url,
  },
  {
      id: 102,
      image: Image Url,
  },
  {
      id: 103,
      image: Image Url,
  }]
  </code></pre>
  <p>I want them to work side by side and then pass them as props to render items based on the data from both the APIs. Here is what i tried i know this code is not correct but i got stuck here. Here is my React code</p>
  <pre><code>const App = () =&gt; {
  
      const [posts, setPosts] = useState([]);
      const [postsExternal, setPostsExternal] = useState([]);
  
  
      useEffect(() =&gt; axios.get(`http://localhost:2000/posts`)
      .then(response =&gt; {
          setPosts(response.data);
          return response.data.external_id;
      })
      .then(getExternalId =&gt; axios.get(`http://localhost:2000/posts/${getExternalId}`))
      .then(response =&gt; {
          setPostsExternal(response.data);
      }), []);
  
  
      return (
          &lt;div&gt;
              &lt;Posts posts={posts} postsExternal={postsExternal}/&gt;
          &lt;/div&gt;
      )
  }
  
  export default App
  </code></pre>