Skip to main content
The ViewBlog component renders a single blog article. It reads the article identifier from the URL, retrieves the corresponding content via getArticle(), and displays it.

​
Route

ViewBlog is mounted at /blog/:id in App.js using React Router v4’s render prop pattern:
src/App.js
<Route exact path='/blog/:id' render={routeProps => <ViewBlog {...routeProps} />} />
For example, navigating to /blog/netflix renders the Netflix article.

​
Component source

src/components/ViewBlog.js
import React from 'react';
import { getArticle } from "../constants/articles";
import { Link } from "react-router-dom";
import PatrickPhoto from '../images/face.JPG';

const ViewBlog = (props) => {
    const id = props.match.params.id;
    const article = getArticle(id);
    return (
        <div className="view-blog">
            <div className="navbar">
                <div className="navbarleft"><p>patrick foster's blog</p></div>
                <Link className="navbarright" to={`/`}><img src={PatrickPhoto} /></Link>
            </div>
            <div className="view-blog-content">
                <div>
                    <h1>{article.title}</h1>
                    {article.context}
                </div>
            </div>
        </div>
    )
};

export default ViewBlog;

​
How article lookup works

1

User navigates to a blog URL

A URL like /blog/netflix matches the route /blog/:id. React Router extracts "netflix" as the id param.
2

ViewBlog reads the route param

ViewBlog receives routeProps spread as props. The article ID is available at props.match.params.id.
3

ViewBlog calls getArticle

The component calls getArticle(id) from src/constants/articles.js. This function looks up the ID in the idsAndArticles map and returns the value — which is the article’s content property from the article module.
4

Article content is rendered

The returned value is stored in article. The component renders article.title as the heading and article.context as the body content.
The component renders article.context — not article.content. However, getArticle(id) returns netflix.content from the idsAndArticles map (a JSX element <main>...</main>). This means article holds a JSX element, and article.context resolves to undefined. This is a bug in the current source code. The heading (article.title) also renders undefined for the same reason.To fix this, idsAndArticles should map IDs to the full article object (not just .content), and ViewBlog should reference article.content instead of article.context.

​
Current articles

IDFileRoute
netflixsrc/constants/articles/netflix.js/blog/netflix

​
Article module structure

Each article is a JavaScript module that exports an object. The netflix article is the only current example:
src/constants/articles/netflix.js
const netflixTitle = 'From `Hello World` to Netflix in 24 months';
const netflixDate = 'December 2023';

const content =
<main>
    <h1>{netflixTitle}</h1>
    <date>{netflixDate}</date>
</main>

const netflix = {
    title: netflixTitle,
    date: netflixTitle,  // Note: this is a bug in source — date is set to the title string
    content
};
export default netflix;
The date field in netflix.js is set to netflixTitle (the title string) instead of netflixDate. This is a bug in the source that causes the date metadata to display the title text instead of the date.

​
Adding a new article

1

Create the article file

Create src/constants/articles/my-article.js and export an object with title, date, and content:
src/constants/articles/my-article.js
const myArticle = {
  title: 'My New Article',
  date: 'March 2026',
  content: (
    <main>
      <h1>My New Article</h1>
      <p>Article body goes here.</p>
    </main>
  )
};
export default myArticle;
2

Import the article in articles.js

Open src/constants/articles.js and import the new module:
import myArticle from './articles/my-article';
3

Register the article

Add entries to both articles (metadata) and idsAndArticles (content map):
const articles = [
  { title: netflix.title, date: netflix.date, id: 'netflix' },
  { title: myArticle.title, date: myArticle.date, id: 'my-article' }
];

const idsAndArticles = {
  'netflix': netflix.content,
  'my-article': myArticle.content
};
4

Navigate to the article

Visit /blog/my-article in the browser. ViewBlog will call getArticle('my-article') and attempt to render the content.
The article ID in the URL must exactly match the key used in idsAndArticles. A mismatch causes getArticle to return undefined, which will cause a runtime error when ViewBlog tries to access .title and .context on it.