Displaying a basic post with Author and Categories in Frontity

post.js

import React from "react";
import { connect, styled } from "frontity";
import Link from "./link";

const Post = ({ state }) => {

    const data = state.source.get(state.router.link); // state.source.get('url-string')
    const post = state.source[data.type][data.id]; // state.source[url-string -> type][url-string -> id] date.type is Post; data.id is Post ID
    const author = state.source.author[post.author]; // state.source.author[post -> author]

    return(
        <div>
            <h2>{post.title.rendered}!!!</h2>
            <ConsoleLog>{ data }</ConsoleLog>
            <ConsoleLog>{ post }</ConsoleLog>
            <MainContent>
                <PostInfo>
                    <p><strong>Posted on : </strong>{post.date}</p>
                    <p><strong>Author: {author.name}</strong></p>
                </PostInfo>
                <div dangerouslySetInnerHTML={{__html: post.content.rendered}} />
            </MainContent>

            <Sidebar>
                {post.categories.map( category => {
                    const cat = state.source.category[category]
                    return (
                        <Link key={cat.id} href={cat.link}>{cat.name}</Link>
                    )
                })}
            </Sidebar>
        </div>
    )
}

export default connect(Post);

const ConsoleLog = ({ children }) => {
    console.log(children);
    return false;
};

const PostInfo = styled.div`
    background-image: linear-gradient(to right, #f4f4f4, #fff);
    margin-bottom: 1em;
    padding: 0.5em;
    border-left: 4px solid lightseagreen;
    font-size: 0.8em;
    
    & > a {
        margin: 0;
    }
`

const MainContent = styled.div`
    width: 75%;
    float: left;
`

const Sidebar = styled.div`
    width: 25%;
    padding: 0 2em;
    float: right;
    border-left: 4px solid lightgrey;
`