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.
App.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Posts } from './components';
const App = () => {
const [ posts, setPosts ] = useState([]);
const [ postsExternal, setPostsExternal ] = useState([]);
const fetchPostsAll = () => {
axios.get(`http://localhost:2000/posts`).then(({ data }) => {
let externalPosts = [];
setPosts(data);
console.log(data);
data.map(({ external_id }) => {
axios
.get(`http://localhost:2000/posts${external_id}`)
.then(({ data }) => {
console.log(data);
externalPosts.push(data);
});
setPostsExternal(externalPosts);
});
});
}
useEffect(() => {
fetchPostsAll();
}, []);
return (
<div>
<Navbar/>
<Posts posts={posts} postsExternal={postsExternal} />
</div>
);
};
export default App;
Posts.js
import React from 'react';
import Post from './Post/Post';
const Posts = ({ posts, postsExternal }) => {
return (
<main>
<Container fluid>
<Row className="p-2">
{ posts.map((post) => (
<Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
<Post post={post} postExternal={postsExternal}/>
</Col>
))}
</Row>
</Container>
</main>
);
};
export default Posts;
Post.js
import React from 'react';
const Post = ({ post, postExternal }) => {
return (
<Figure>
<span>{post.title}</span>
<span>{postExternal.rating}</span>
</Figure>
)
}
export default Post;
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
You just don't desctructure the props and pass it as is.
import React from 'react';
import Post from './Post/Post';
const Posts = (props) => {
const { posts } = props;
return (
<main>
<Container fluid>
<Row className="p-2">
{ posts.map((post) => (
<Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
<Post {...props} post={post}/>
</Col>
))}
</Row>
</Container>
</main>
);
};
export default Posts;
And you can do this in your App.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Posts } from './components';
const App = () => {
const [ posts, setPosts ] = useState([]);
const [ postsExternal, setPostsExternal ] = useState([]);
const fetchPostsAll = () => {
axios.get(`http://localhost:2000/posts`).then(({ data }) => {
let externalPosts = [];
setPosts(data);
console.log(data);
data.map(({ external_id }) => {
axios
.get(`http://localhost:2000/posts${external_id}`)
.then(({ data }) => {
console.log(data);
externalPosts.push(data);
});
setPostsExternal(externalPosts);
});
});
}
useEffect(() => {
fetchPostsAll();
}, []);
const props = { posts, postsExternal };
return (
<div>
<Navbar/>
<Posts {...props} />
</div>
);
};
export default App;
Do:
import React from 'react';
import Post from './Post/Post';
const Posts = ({ posts, postsExternal }) => {
return (
<main>
<Container fluid>
<Row className="p-2">
{ posts.map((post, index) => (
<Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
<Post post={post} postExternal={postsExternal[index]}/>
</Col>
))}
</Row>
</Container>
</main>
);
};
export default Posts;
Edited:
import React from 'react';
import Post from './Post/Post';
const Posts = ({ posts, postsExternal }) => {
return (
<main>
<Container fluid>
<Row className="p-2">
{posts.length !== 0 && postsExternal.length !== 0 && posts.map((post, index) => (
<Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
<Post post={post} postExternal={postsExternal[index]}/>
</Col>
))}
</Row>
</Container>
</main>
);
};
export default Posts;
Make sure your data is loaded.
fetchPostsAll function:
const fetchPostsAll = () => {
axios.get(`http://localhost:2000/posts`)
.then(({ data }) => {
console.log(data);
const externalPosts = data.map(({ external_id }) => {
return axios
.get(`http://localhost:2000/posts${external_id}`)
.then(({ data }) => {
return data;
});
})
Promise
.all(externalPosts)
.then(externalPosts => {
setPosts(data);
setExternalPosts(externalPosts);
});
})
;
}