title: Dynamic routing with React, Blog Posts and Wordpress API
body: <p>I tried following <a href="https://www.sitepoint.com/react-router-v4-complete-guide/" rel="nofollow noreferrer">this tutorial</a> to get a feel of how dynamic routing would work. Now instead of using static data, I want to pull in blog posts using WordPress' API to generate unique links for each post. I'm able to generate the link, but none of the data is generating on the new page. What am I doing wrong here?</p>
  
  <p>Articles.js (serves as the preview page to grab all the blog posts, works as expected)</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";
  
  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={articles} {...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 (to render up each individual article)</p>
  
  <pre><code>import React from 'react';
  
  const Article = ({match, data}) =&gt; {
    let article = data.find(a =&gt; a.slug == match.params.articleSlug);
    let articleData;
  
    if(article)
      articleData = &lt;div&gt;
        &lt;h3&gt; {article.title.rendered}&lt;/h3&gt;
        { console.log(`${article.title.rendered}`) }
        &lt;p&gt;{article.content.rendered}&lt;/p&gt;
        { console.log(`${article.content.rendered}`) }
        &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>