title: Rendering dynamic content on their own pages
body: <p>Follow up on <a href="https://stackoverflow.com/questions/48459816/dynamic-routing-with-react-blog-posts-and-wordpress-api/48460099#48460099">this question</a>. I'm trying to work on generating completely separate views for data that's dynamically rendered from the WordPress API. I'm able to generate the the new link, but I keep getting undefined errors because the data isn't being properly passed. Where am I getting it wrong?</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link, Route, Switch } from 'react-router-dom';
  import Home from './Home';
  import Articles from './Articles';
  import Article from './Article';
  
  let article;
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="nav"&gt;
            &lt;Link to="/"&gt;Home&lt;/Link&gt;&amp;nbsp;&amp;nbsp;
            &lt;Link to="/category"&gt;Category&lt;/Link&gt;&amp;nbsp;&amp;nbsp;
            &lt;Link to="/articles"&gt;Articles&lt;/Link&gt;&amp;nbsp;&amp;nbsp;
  
          &lt;/div&gt;
  
          &lt;div&gt;
          &lt;Switch&gt;
            &lt;Route exact path={"/"} component={Home} /&gt;
            &lt;Route path={"/category"} component={Category} /&gt;
            &lt;Route path={"/articles"} component={Articles} /&gt;
            &lt;Route path="/news/:articleSlug" render={(props) =&gt; &lt;Article  {...props} /&gt;} /&gt;
  
          &lt;/Switch&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Articles.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link, Route } from 'react-router-dom';
  import Article from './Article';
  
  const newsURL = "http://myprivateblogapi.com/wp-json/wp/v2/posts?_embed/wp-json/wp/v2/posts?_embed";
  
  export default class Articles extends Component {
    constructor(props) {
      super(props);
      this.state = {
        newsData: [],
        requestFailed: false
      }
    }
  
    componentDidMount() {
      fetch(newsURL)
        .then(response =&gt; {
          if(!response.ok) {
            throw Error("Network request failed.");
          }
          return response
        })
        .then(d =&gt; d.json())
        .then(d =&gt; {
          this.setState({
            newsData: d
          })
        }, () =&gt; {
          this.setState({
            requestFailed: true
          })
        })
    }
  
    render() {
  
      let articles = this.state.newsData.map((article, index) =&gt; {
        if(this.state.requestFailed) return &lt;p&gt;Failed!&lt;/p&gt;
        if(!this.state.newsData) return &lt;p&gt;Loading...&lt;/p&gt; 
        return(
          &lt;div key={index} className="article-container"&gt;
  
            &lt;div className="article-preview"&gt;
            &lt;span className="article-date"&gt;{article.date}&lt;/span&gt;
            &lt;h5&gt;{article.title.rendered}&lt;/h5&gt;
            &lt;div dangerouslySetInnerHTML={{ __html: article.excerpt.rendered }} /&gt;
  
            &lt;Link to={`/news/${article.slug}`}&gt;Read More...&lt;/Link&gt;
  
            &lt;/div&gt;
            &lt;Route path={`/news/:articleSlug`}
              render={ props =&gt; &lt;Article data={article} {...props} /&gt;} /&gt;
          &lt;/div&gt;
  
        )
      });
  
      return (
        &lt;div&gt;
          &lt;h3&gt;All Articles from Blog&lt;/h3&gt;
          {articles}
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Article.js</p>
  
  <pre><code>import React from 'react';
  
  const Article = ({match, data}) =&gt; {
    let articleData;
  
    if(data)
      articleData = &lt;div&gt;
        &lt;h3&gt; {data.title.rendered}&lt;/h3&gt;
        &lt;div dangerouslySetInnerHTML={{ __html: data.content.rendered }} /&gt;
        &lt;hr /&gt;
      &lt;/div&gt;
  
    else 
      articleData = &lt;h2&gt; Sorry. That article doesn't exist. &lt;/h2&gt;;
  
      return (
        &lt;div&gt;
          &lt;div&gt;
            {articleData}
          &lt;/div&gt;
        &lt;/div&gt;
      )
  }
  
  export default Article;
  </code></pre>
  
  <p>The page keeps defaulting to the "Sorry" block.</p>