In this video, we use the generated React HoC to bring models into a component, and learn how to configure the HoC to ensure that your models are properly prepared for use in the UI.

I’m going to use the tooling now to create a component that’s going to be able to consume that model that we just generated.

So to start off with, we can go into the NX console, we can say generate, and we’re going to create a new component here.

Last model we created was the config details.

Let’s just create something that will allow us to view the config details as we work with it going forward.

We’ll call it the config details view, and we’ll say that it’s a component.

Again, we get the dry run indicating that there’s going to be a couple of files created.

I can say generate, and it’s available to me in the file system.

So here’s our config details view.

There’s not a lot here, but this is probably going to be the first place that we can start to use some of the generated components.

Now, especially if we’re working with a singleton model where there isn’t any configuration that I’m going to be passing in, the higher order component becomes a really convenient way to bring models into RUI without having to worry about all of the life cycle.

Because remember, there is a life cycle associated with the model, and so we want to make sure that we aren’t displaying things in the UI before the models are ready.

It’s a common problem that you see with React development with dispensers is a lot of boilerplate goes into how do you hide the UI, or how do you show something before the models are in fact ready to be used.

So the higher order components and the hooks that are available take care of a lot of that for you.

So in this case, let’s actually go ahead and modify our component so that it’s going to display some information.

So ideally, we’d be able to pass in our config details where we pass in a model.

In this case, it’s one of our config details model objects, and we’ll modify the component to take that as well.

Simple enough so far, and I’d be able to then use that in the component.

So in this case, I’ll just take the config details, and I’ll just put out the ID for now.

Nothing to add yet because we haven’t modified our model yet.

In this case, the question is, well, how do I pass this config details in, and how do I actually construct a new one of these things to make available to the UI?

You could, as part of this, use the factory and generate a new model, but then you need to make sure your code accounts for all of the asynchronous activities going on, waiting for it to run through all of its loading and making sure that it’s ready to use.

And while that’s possible, and there are things available that make it possible, let’s start with the simpler cases here, where we can say, rather than exporting the component directly, I can export another instance of it using a higher order component, where in this case it’s a config details view, and it’s equal to with config details.

You’ll recall that one of the things generated by the tooling was a higher order component, where I pass in this component.

What this higher order component is going to do is take the component, it’ll go fetch an instance of that, or find the instance of that model.

If it doesn’t exist, it will create it, and then it will pass it into that component as a prop.

So I don’t need to worry about finding the config details.

I don’t need to worry about identifying an instance of it or creating it in my component.

I just need to use an instance of this config details view, and it’ll automatically have this available by the time it’s rendering.

So to show that, if I wanted to go back into, you’ll recall, the dispenser view, where we had the system info view before.

I can say config details view, and because it’s a higher order component where that property is going to be passed in or factored into it when it’s rendered, I don’t need to give it any details.

It’ll automatically fetch that for me.

So if we open up our browser again and reload the page.

There we go.

So I had to save that there, but you can now see that the ID of the config details is available here.

And I can add to this as I need to.

So I’ve now got a section, a new component that’s going to be responsible for putting this in.

And what we’ve been able to see here is I’ve been able to use the tooling to create a new component.

I’m using one of the higher order components that are generated that will fetch and make that model available to the component automatically.

And then I’ve been able to use that new component within my code.

Now I mentioned that there are a couple of different ways that you can go about bringing in the same information.

The higher order component is the simplest one, but there are some other things that are available where I can make some content available.