'React Component Not Rerendering - Base Class

I'm having an issue where a component isn't rerendering. There's a base class that's needed to be overriden in order to perform testing.

I'm expecting it to fire after the handleChange function is called because someone typed in the textbox.

BASE CLASS

import * as React from 'react';
import { ISiteListRendererProps } from "./SiteListRendererProps";
import { SitelistState, SiteItem } from './ISitelistState';

export default class SiteListRendererBase extends React.Component<ISiteListRendererProps, SitelistState> {

    public SiteItemsPremise : SiteItem[];
    public SiteItemsOnline : SiteItem[];
    public SearchText: string;

    public constructor(props) {
       super(props);
      }

    public render(): React.ReactElement<ISiteListRendererProps> {
        return (<div id="SiteListRendererNull"></div>);     
    }

}

CHILD CLASS

import * as React from 'react';
import { ISiteListRendererProps } from "./SiteListRendererProps";
import SiteListRendererBase from './SiteListRendererBase';

export default class SiteListRenderer extends SiteListRendererBase {

  public constructor(props) {
    super(props);
    this.state = {SearchText: "", SiteItemsPremise: null, SiteItemsOnline: null, OnPremiseUrl: null};
    //this.handleChange = this.handleChange.bind(this);
  }

    public render(): React.ReactElement<ISiteListRendererProps> {
        console.log("rerender: " + this.state.SearchText);
        console.log(this.SearchText);
        let siteItems = this.SiteItemsPremise.concat(this.SiteItemsOnline);
        siteItems.sort((a, b) => (a.Title > b.Title ? 1 : -1));

        return (
            <div>
              <div>
                <input type="text" onChange={this.handleChange} />
              </div>
              {siteItems
                .filter(
                  (item, index) =>
                    this.state.SearchText.length == 0 ||
                    item.Title.toUpperCase().indexOf(
                      this.state.SearchText.toUpperCase()
                    ) >= 0
                )
                .map((item, index) => (
                  <p key={item.Url}>
                    <a href={item.Url} target="_blank">{item.Title + " (" + item.Location + ")"}{this.SearchText}</a>
                  </p>
                ))}
            </div>
          );    
    }

    handleChange = (e) => {
      this.setState({ SearchText: e.target.value});
      this.forceUpdate();
    }

}

PROPS AND STATE FOR COMPLETENESS

export class SitelistState {
    public SiteItemsOnline: SiteItem[];
    public SiteItemsPremise: SiteItem[];
    public SearchText: string;
    public OnPremiseUrl: string;
}

export class SiteItem {
    public Title: string;
    public Url: string;
    public Location: string;
    public WebTemplate: string;
  }

export interface ISiteListRendererProps {
  SiteItemsPremise : SiteItem[];
  SiteItemsOnline : SiteItem[];
  SearchText: string;
}
 


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source