BretCameron

<?php // Add 'featured_image_url' to REST data

  function post_featured_image_json( $data, $post, $context ) {
  $featured_image_id = $data->data['featured_media'];
  $featured_image_url = wp_get_attachment_image_src( $featured_image_id, 'original' );

  if( $featured_image_url ) {
    $data->data['featured_image_url'] = $featured_image_url[0];
  }

BretCameron

<?php // Filter REST data

function filter_rest_data( $data, $post, $request ) {
  $_data = $data->data;
  $params = $request->get_params();
  if ( ! isset( $params['id'] ) ) {
    unset( $_data['date'] );
    unset( $_data['slug'] );
    unset( $_data['date_gmt'] );
    unset( $_data['modified'] );

BretCameron

import React, { Component } from 'react';

export default class Movies extends Component {
  
  constructor(props) {
    super(props);
    this.state = { data: {} };
  
    this.fetchPostData = this.fetchPostData.bind(this);
    this.renderMovies = this.renderMovies.bind(this);

BretCameron

  constructor(props) {
    super(props);
    this.state = { data: {} };
  
    this.fetchPostData = this.fetchPostData.bind(this);
    this.renderMovies = this.renderMovies.bind(this);
    this.populatePageAfterFetch = this.populatePageAfterFetch.bind(this);
    
  }

BretCameron

componentDidMount() {
    this.fetchPostData();
}

BretCameron

  fetchPostData() {
    fetch(`http://localhost/yoursitename/wp-json/wp/v2/movies?per_page=100`)
      .then(response => response.json())
      .then(myJSON => {
        let objLength = Object.keys(myJSON).length;
        let newState = this.state;
      
        for (let i = 0; i < objLength; i++) {
          let objKey = Object.values(myJSON)[i].title.rendered;
          let currentMovie = newState.data[objKey];

BretCameron

  renderMovies() {
    if (this.state.data) {
      const moviesArray = Object.values(this.state.data)
      return Object.values(moviesArray).map((movie, index) => this.populatePageAfterFetch(movie, index));
    }
  }

BretCameron

  populatePageAfterFetch(movie, index) {
    if (this.state.data) {

      return (
        <div key={index} index={index}> 
          <h2 className="name">{movie.name}</h2> 
          <h3 className="genre">{movie.genre}</h3>
          <div className="description" dangerouslySetInnerHTML={{__html: movie.description}} />
          <img className="featured_image" src={movie.featured_image} alt={movie.name} />
        </div>

BretCameron

  render() {
      return (
      <>
        <h1>Movies</h1>
        <div>{this.renderMovies()}</div>
      </>
      )
  }

BretCameron

<?php // Change title placeholder text for a custom post type

function change_title_text( $title ){
  $screen = get_current_screen();
  if ( 'movies' == $screen->post_type ) {
    $title = 'Enter movie name here';
  }
  return $title;
}