Dynamic Routing With React, Blog Posts And Wordpress Api

I tried following this tutorial 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 uni

Solution 1:

I think issue is here:

render={ (props) =><Articledata={articles} {...props} />} />

And in articles you are storing the result of map, so it will not have the data that you are expecting:

let articles = this.state.newsData.map(....)

Solution:

1- If you want to pass the full array then write it like this (not a good idea):

render={ props =><Articledata={this.state.newsData} {...props} />} />

2- Pass the single object and looping will be not required inside Article component:

render={ props =><Articledata={article} {...props} />} />

And Article component:

constArticle = ({match, data}) => {
  let articleData;

  if(data)
    articleData = <div><h3> {article.title.rendered}</h3><p>{article.content.rendered}</p><hr /></div>else 
    articleData = <h2> Sorry. That article doesn't exist. </h2>;

    return (
      <div><div>
          {articleData}
        </div></div>
    )
}