Mashup: Feature state on User Story

tau.mashups
  .addDependency('react')
  .addDependency('tau/api/layout-renderer/v1/registerReactComponent')
  .addDependency('tau/api/layout-renderer/v1/LayoutContextConsumer')
  .addDependency('tau/api/layout-renderer/v1/useEntityQuery')
  .addMashup(function(React,registerReactComponent,LayoutContextConsumer,useEntityQuery) {
    registerReactComponent({
      type: 'featureInfo',
      component: function(props) {

        const {
          data,
          isLoading,
          error
        } = useEntityQuery(
          `feature:{state:Feature.EntityState.Name}`
        );
        // handle is still loading
        if (isLoading && !data) { // this is the case for initial loading
          return React.createElement("div","Loading...");
        }
        
        //handle error
        if (error) {
          console.error(error);
          return React.createElement("div","Error");
        }
        
        console.log(data);
        return React.createElement("div", 
            {"class":"layout-field-container layout-renderer__component-container"},
            [
                React.createElement("div", {"class":"ui-label-container"}, "Feature state"),
                React.createElement("div", {"class":"layout-field__value"}, data.feature.state || "N\\A")
            ]
        );
      }});
  });

{
  "type": "featureInfo"
}