Map 2 jsons and render in 1 card component + date formatting

Question

I would like a help: I have two Json: posts and Author. Json posts returns right in the log. Each post has a respective author. It’s already showing the cards with the right post, but I also need to show the author of this post taking the name of the second Json and show it on the same card. And tbm need to format the date of the post that is coming as: "publishedAt": 1492004832000. I need to format and separate day, month and year.

Grateful for the attention

Jsons : Publications: http://www.mocky.io/v2/5be5e3fa2f000082000fc3f8 Authors: http://www.mocky.io/v2/5be5e3ae2f00005b000fc3f6

App.js:

import React, { useState, useEffect } from 'react';
import api from './services/api';

import Navbar from './components/Navbar';
import PostCard from './components/PostCard';
import Footer from './components/Footer';

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function loadPosts() {
      const response = await api.get('5be5e3fa2f000082000fc3f8');

      const postsApi = response.data;

      setPosts(postsApi);
    }
    loadPosts();
  }, []);

  return (
    <>
      <div id="App">
        <Navbar />
        <div className="cards">
          {posts?.map((post, index) => (
            <div key={index}>
              <PostCard post={post} />
            </div>
          ))}
        </div>
        <Footer />
      </div>
    </>
  );
}

export default App;

Answer 1

A possible resolution would be:

App.js

 import React, { useState, useEffect } from "react";
 import "./styles.css";
 import axios from "axios";
 import PostCard from "./PostCard";

 export default function App() {
    const [posts, setPosts] = useState([]);
    const [authors, setAuthors] = useState([]);

  useEffect(() => {
       async function loadPosts() {
         axios
           .get("https://www.mocky.io/v2/5be5e3fa2f000082000fc3f8")
           .then(res => {
             setPosts(res.data);
           });
       }
        loadPosts();
  }, []);

  useEffect(() => {
     async function loadAuthors() {
       axios
       .get("https://www.mocky.io/v2/5be5e3ae2f00005b000fc3f6")
       .then(res => {
          console.log(res);
          setAuthors(res.data);
      });
    }

     loadAuthors();
  }, []);

  const getAuthor = id => {
     let ret = authors.filter((author, i) => {
       return author.id === id;
    });

      console.log(ret[0].name);
        return ret[0].name;
  };

  return (
    <div className="App">
  {posts
    ? posts.map(element => (
        <PostCard
          key={element.metadata.publishedAt}
          post={element}
          author={getAuthor(element.metadata.authorId)}
        />
      ))
    : ""}
  </div>
 );
}

Postcard.js

import React from "react";

export default function PostCard({ post, author }) {
  const convertDate = date => {
    let newDate = new Date(date);
   return newDate.toLocaleDateString();
  };

 return (
   <div key={post.metadata.publishedAt}>
      <h1>{post.title}</h1>
      <p>{convertDate(post.metadata.publishedAt)}</p>
      <p>Author: {author}</p>
      <p>{post.body}</p>
   </div>
  );
}