How to implement multiple API in one component

Question

i stuck in a project where i have to implement JSON Place Holder Post API and JSON Place Holder Comment API both API in a particular component.Actually my task is build a project like a facebook post component where user can post and comment. I implemented Post API successfully but i couldn't find any solution to use comment API. I did all thing but it's not show in my Home component. How can i implement comment api in my home component

my console said it present but i couldn't show this This is Home.js File

import React, { useEffect, useState } from 'react';
import Post from '../Post/Post';
import Comment from '../Comment/Comment';
import './Home.css';

const Home = () => {
const [post,setPost] = useState([]);
const [comment,setComment] = useState([]);


useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res=>res.json())
    .then(data=>setPost(data))

},[])

useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/comments')
    .then(res=>res.json())
    .then(data=>setComment(data))
},[])

return (
    <div>
        
        
        <div>
        {
            post.map(post=><Post post={post}></Post>)
            
        }
         
        </div>
       <div className="main-body">
       {
                comment.map(comment=><Comment comment={comment}></Comment>)
            }

       </div>
    </div>
);
};

export default Home;

This comment.js File

import React from 'react';

const Comment = (props) => {
const {name,email} = props.comment.name;
console.log(props.comment);
return (
    <div>
          {name}
          {email}
    </div>
);
};

export default Comment;

This is post.js File

import React from 'react';
import './Post.css';

const Post = (props) => {

const {title,body} = props.post;
return (
    <div className="body-style">
        <h1 className="name">{title}</h1>
        <p>{body}</p>
    </div>
);
 };

export default Post;

Please help me I need solution

Answer 1

The structure is incorrect, in order to do that, comment should be children of post, and home will pass data to the post. Since you fetch data from 2 difference API, you need to combined it into 1 source and pass that down.

Home.js

import React, { useEffect, useState } from 'react';
import Post from '../Post/Post';
import './Home.css';

const Home = () => {
const [post,setPost] = useState([]);
const [comment,setComment] = useState([]);
const [ info, setInfo ] = useState([]);


useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res=>res.json())
    .then(data=>setPost(data))

},[])

useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/comments')
    .then(res=>res.json())
    .then(data=>setComment(data))
},[])

//Function to combine post and comment base on ID
const merge = (post, comment) => {
                const temp = [];
                post.forEach((x) => {
                    comment.forEach((y) => {
                        if (x.id === y.id) {
                            let cName = y.name;
                            let cEmail = y.email;
                            let cBody = y.body;
                            temp.push({ ...x, cName, cEmail, cBody });
                        }
                    });
                });
                return temp;
            };
      
useEffect(
        () => {     
            setInfo(merge(post, comment));
            console.log(info);
        },
        [ post, comment ]
    );
return (
    <div>
        {info.map((each) => <Post key={each.id} data={each} />)}
    </div>
);
};

export default Home;

Post.js

import React from 'react';
import Comment from './Comment';

const Post = (props) => {
    const { title, body, cEmail, cName } = props.data;
    return (
        <div className="body-style">
            <h1 className="name">{title}</h1>
            <p>{body}</p>
            <Comment email={cEmail} name={cName} />
        </div>
    );
};

export default Post;

Comment.js

import React from 'react';

const Comment = ({ name, email }) => {
    return (
        <div>
            {name}
            {email}
        </div>
    );
};

export default Comment;