Displaying simple fetched data in custom view HTML

[Vixxd]

This is an excellent CMS but perhaps too easy to set up for someone like me who has not used React at this level in a while! Following on from the issue posted here: #132 - I would like to display fetched data in custom view at the top of one of my collection pages.

I am using useDataSource as I could not get the above useCustomDataSource to work. I am using the CustomView from the Example app to do this.

For example, I want to fetch one particular entity and print out a value it has: 'The high-bucket weighting is 24.', i.e.:

I am able to put this within a div (<div>This is an example of an additional view</div>) and have it print to the console:

export function BucketView({
                                   path,
                                   collection
                               }: { path: string, collection: EntityCollection }) {

 const dataSource = useDataSource();
...
 return (
<Box> ...
<div> ...
{dataSource.fetchEntity(
    {path: "buckets",
    entityId: "high-bucket",
    schema: bucketsSchema})
    .then((results)=> 
    console.log(results))}
...
</div>
</Box>
);
}

But I am getting the following errors I need to resolve before I can output my data to the page:

react-jsx-dev-runtime.development.js:117 Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Box)`, expected a ReactNode.
    at Box (http://localhost:3000/static/js/bundle.js:104834:72)
    at BucketView (http://localhost:3000/static/js/bundle.js:57:5)
    at BreadcrumbUpdater (http://localhost:3000/static/js/bundle.js:13735:5)
    at Routes (http://localhost:3000/static/js/bundle.js:246686:5)
    at NavigationRoutes (http://localhost:3000/static/js/bundle.js:13674:5)
    at main
    at div
    at Scaffold (http://localhost:3000/static/js/bundle.js:14087:5)
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:104065:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:102891:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:104085:5)
    at LocalizationProvider (http://localhost:3000/static/js/bundle.js:70304:5)
    at BreadcrumbsProvider (http://localhost:3000/static/js/bundle.js:2175:5)
    at FireCMSContextProvider (http://localhost:3000/static/js/bundle.js:2158:5)
    at SnackbarProvider (http://localhost:3000/static/js/bundle.js:2096:5)
    at ModeProvider (http://localhost:3000/static/js/bundle.js:2201:5)
    at FireCMS (http://localhost:3000/static/js/bundle.js:3183:5)
    at Router (http://localhost:3000/static/js/bundle.js:246619:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:246099:5)
    at FirebaseCMSApp (http://localhost:3000/static/js/bundle.js:16177:5)


react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:13231:1)
    at createChild (react-dom.development.js:13469:1)
    at reconcileChildrenArray (react-dom.development.js:13719:1)
    at reconcileChildFibers (react-dom.development.js:14125:1)
    at reconcileChildren (react-dom.development.js:16990:1)
    at updateHostComponent (react-dom.development.js:17632:1)
    at beginWork (react-dom.development.js:19080:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)


react-dom.development.js:20085 The above error occurred in the <div> component:
    at div
    at http://localhost:3000/static/js/bundle.js:17401:66
    at Box (http://localhost:3000/static/js/bundle.js:104834:72)
    at div
    at http://localhost:3000/static/js/bundle.js:17401:66
    at Box (http://localhost:3000/static/js/bundle.js:104834:72)
    at BucketView (http://localhost:3000/static/js/bundle.js:57:5)
    at BreadcrumbUpdater (http://localhost:3000/static/js/bundle.js:13735:5)
    at Routes (http://localhost:3000/static/js/bundle.js:246686:5)
    at NavigationRoutes (http://localhost:3000/static/js/bundle.js:13674:5)
    at main
    at div
    at Scaffold (http://localhost:3000/static/js/bundle.js:14087:5)
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:104065:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:102891:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:104085:5)
    at LocalizationProvider (http://localhost:3000/static/js/bundle.js:70304:5)
    at BreadcrumbsProvider (http://localhost:3000/static/js/bundle.js:2175:5)
    at FireCMSContextProvider (http://localhost:3000/static/js/bundle.js:2158:5)
    at SnackbarProvider (http://localhost:3000/static/js/bundle.js:2096:5)
    at ModeProvider (http://localhost:3000/static/js/bundle.js:2201:5)
    at FireCMS (http://localhost:3000/static/js/bundle.js:3183:5)
    at Router (http://localhost:3000/static/js/bundle.js:246619:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:246099:5)
    at FirebaseCMSApp (http://localhost:3000/static/js/bundle.js:16177:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at FireCMS (http://localhost:3000/static/js/bundle.js:3183:5)
    at Router (http://localhost:3000/static/js/bundle.js:246619:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:246099:5)
    at FirebaseCMSApp (http://localhost:3000/static/js/bundle.js:16177:5)

It has been a while since I used React at this level so I am certain that I am missing something fundamental - if there is a quick and easy way for me just to print something returned from an http call within a div that would be much appreciated. Thanks!

[fgatti675]

Hi @Vixxd, this is a general React development question and not a FireCMS one, so I can't really support you here.
If you want to use fetchEntity, you will want to do so in a useEffect:
https://reactjs.org/docs/hooks-effect.html
call and then save the result in a state:
https://reactjs.org/docs/hooks-state.html
which you can then render in your div