How do i render multiple props in a single component and then pass those props to a child component in React

user_14727780 0
Viewed 154

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

reactjs javascript
2 Answers

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;
user_45749280

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);
             });
    })
    ;
  }
user_171808980
Related