Using React to Render Content from WP REST API | https://ibenic.com/react-render-content-wp-rest-api

app-1.js

class App extends React.Component {
  render() {
    return (
     bla
    )
  }
}

const element = <App />

ReactDOM.render(
  element,
  document.getElementById('app')
);

app-2.js

class App extends React.Component {
  render() {
    return (
     <div>
        <WPSitesSelector/>
     </div>
    )
  }
}

app-3.js

class App extends React.Component {
  constructor(props) {
    // Enable this.props for future.
    super(props);
    // Bind this so we can use this.setState().
    this.getPosts = this.getPosts.bind(this);
    this.state = {posts : []};
  }
  getPosts(url) {
    if( url !== '0' ) {
      let json = fetch(url)
      .then(response => { return response.json()})
      .then(posts => {this.setState({posts: posts})});
    } else {
      this.setState({posts: []});
    }
  }
  render() {
    return (
     <div>
        <WPSitesSelector getPostsOnChange={this.getPosts}/>
     </div>
    )
  }
}

app-4.js

class App extends React.Component {
  // ... previous code is still here.
  render() {
    return (
     <div>
        <WPSitesSelector getPostsOnChange={this.getPosts}/>
        // Adding lists of posts and passing posts from state.
        <WPSitePosts posts={this.state.posts} />
     </div>
    )
  }
}

app-5.js

class App extends React.Component {
  // ... previous code is still here.
  render() {
    return (
     <div>
        <WPSitesSelector getPostsOnChange={this.getPosts}/>
        // Adding lists of posts and passing posts from state.
        <WPSitePosts posts={this.state.posts} />
     </div>
    )
  }
}

app.html

<div id="app"></div>

post-1.js

class WPPost extends React.Component {
  constructor(props){
    // Set this.props.
    super(props); 
  } 
  render() {
    return (
      <article>
      <h2 dangerouslySetInnerHTML={{__html: this.props.post.title.rendered}}></h2>
      <p dangerouslySetInnerHTML={{__html: this.props.post.excerpt.rendered}}></p>
        <a target="_blank" href={this.props.post.link}>Read More</a>
       </article>
    )
  }
}

posts-1.js

class WPSitePosts extends React.Component {
  constructor(props){
    // Set this.props.
    super(props);
  }
  render() {
    let posts = '';
    // We will populate the posts here.
    return (
      <div>
      {posts}
      </div>
    )
  }
}

posts-2.js

class WPSitePosts extends React.Component {
  // ...
  render() {
    let posts = '';
    if( this.props.posts.length == 0 ) {
      posts = <p>Nothing to See</p>;
    } else {
      posts = this.props.posts.map(post => {
        return(
         <WPPost post={post}/>
        )
      });
    }
    return (
      <div>
      {posts}
      </div>
    )
  }
}

selector-2.js

class WPSitesSelector extends React.Component {
  constructor(props){
    // We are using props here so enable them.
    super(props);
    // Enable this so we can access props.
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    // Calling the passed function through props
    // this will call getPosts in App.
    this.props.getPostsOnChange(e.target.value);
  }
  render() {
    
    // ... previous code is still here
    
    return (
      <select onChange={this.handleChange}>
      {links}
      </select>
    )
  }
}

selector.js

class WPSitesSelector extends React.Component {
  // Render method.
  render() {
    // Array with links.
    const data = [
      {
        url: 0,
        title: 'Select a Site'
      },
      {
        url: 'https://tommcfarlin.com/wp-json/wp/v2/posts',
        title: 'TomMcFarlin.com'
      }
    ];
    // Building a list of options as React Elements with JSX.
    const links = data.map( ( link, index ) => {
      return (
      <option key={index} value={link.url}>
        {link.title}
      </option>)
    });
    // Returning the select dropdown with all the links as options.
    return (
      <select>
      {links}
      </select>
    )
  }
}