componentD.js

// Inside parent component
  state = {
    isLoading: true,
    posts: [],
    isErrorLoading: false,
    error: null
  };

  // rendering logic handles by Parent Component (if statements)
  // but the actual rendering job is handled by nested components
  render() {
    
    // LoadingComponent is resuable and can be used anywhere in the application
    if (this.state.isLoading) {
      return <LoadingComponent />;
    }
    if (this.state.isErrorLoading) {
      return <ErrorLoadingComponent error={this.state.error} />;
    }
    return (
      <div>
      {/* some component */}
      </div>
    );
  }
}