title: How do i render multiple props in a single component and then pass those props to a child component in React
body: <p>I was trying to render multiple props in a single component both the props are from different apis which are working together and the problem is i want to map the props in a single component to display a list of posts. someone said me do this by creating a variable (array) in my  component. Then, spreading the properties (props) into the variable e.g myVariable.push(...posts, ...externalPosts). But i can't seem to figure out how do i achieve the results the Component  renders another child component called  to which i want to pass on the props.</p>
  <p>App.js</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import { Posts } from './components';
  
  
  
  const App = () =&gt; {
    const [ posts, setPosts ] = useState([]);
    const [ postsExternal, setPostsExternal ] = useState([]);
  
    const fetchPostsAll = () =&gt; {
      axios.get(`http://localhost:2000/posts`).then(({ data }) =&gt; {
        let externalPosts = [];
        setPosts(data);
        console.log(data);
        data.map(({ external_id }) =&gt; {
          axios
            .get(`http://localhost:2000/posts${external_id}`)
            .then(({ data }) =&gt; {
              console.log(data);
              externalPosts.push(data);
            });
          setPostsExternal(externalPosts);
        });
      });
    }
  
   
    useEffect(() =&gt; {
      fetchPostsAll();
    }, []);
    
    return (
      &lt;div&gt;
        &lt;Navbar/&gt;
        &lt;Posts posts={posts} postsExternal={postsExternal} /&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Posts.js</p>
  <pre><code>import React from 'react';
  import Post from './Post/Post';
  
  const Posts = ({ posts, postsExternal }) =&gt; {
      return (
          &lt;main&gt;
              &lt;Container fluid&gt;
                  &lt;Row className=&quot;p-2&quot;&gt;
                      { posts.map((post) =&gt; (
                          &lt;Col className=&quot;p-lg-4 p-sm-3&quot; key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}&gt;
                              &lt;Post post={post} postExternal={postsExternal}/&gt;
                          &lt;/Col&gt;
                      ))}
                  &lt;/Row&gt;
              &lt;/Container&gt;
          &lt;/main&gt;
      );
  };
  
  export default Posts;
  </code></pre>
  <p>Post.js</p>
  <pre><code>import React from 'react';
  
  const Post = ({ post, postExternal }) =&gt; {
      return (
          &lt;Figure&gt;
              &lt;span&gt;{post.title}&lt;/span&gt;
              &lt;span&gt;{postExternal.rating}&lt;/span&gt;
          &lt;/Figure&gt;
      )
  }
  
  export default Post;
  
  </code></pre>
  <p>The problem is with the Posts.js file while mapping i want to map both the props and pass those single item props to Post.js</p>