I want to build a simple blog where posts are fetched from https://jsonplaceholder.typicode.com/posts and users from https://jsonplaceholder.typicode.com/users but I am stuck with the following problem. I want to display author name next to the post but I don't know how to code it. Simply put I need to use IF from the JSON object from the call to https://jsonplaceholder.typicode.com/posts and according to the result display author name from the call to https://jsonplaceholder.typicode.com/users...

Here is the relevant piece of code:

import { useParams } from "react-router-dom";
import useFetch from "./useFetch";


const BlogDetails = () => {
  const { id } = useParams();
  const { data: blog, error, isPending } = useFetch('https://jsonplaceholder.typicode.com/posts/' + id);
  

 

  return (
    <div className="blog-details">
      { isPending && <div>Loading...</div> }
      { error && <div>{ error }</div> }
      { blog && (
        <article>
          <h2>{ blog.title }</h2>
          <p>Written by { blog.userId }</p>
          <div>{ blog.body }</div>
          <p>Comments: </p>
        </article>
        
      )}
    </div>
  );
}
 
export default BlogDetails;

The whole code is here: https://github.com/qubit4/react_blog

What I should put into "Written by: { }" instead of "blog.userId" to make it work?