Loading Your Content

In the previous step, we saw an error being thrown from our implementation.

This is because the useTina callback is being called before fetchContent has completed... and it's all being done client side!

To fix this, we need to alter our approach a little, so that the useTina method is called once our async data fetching is complete.

We will do this by creating a new child component, and only render that component when we have some data (a typical React solution to asynchronous data fetching).

The Fix

1. Create a new component app/awesome-content.tsx

2. Add the following code to it:

3. Refactor the app/page.tsx to conditionally display <AwesomeContent /> only when we have data:

That's it!

Check the Solution

1. Navigate to http://localhost/admin/index.html and edit your amazing title and see how the changes are immediately reflected in the HTML.
2. Click "Save", and navigate back to http://localhost:3000 to see your changes persisted on your "production" site.

Bonus: check your Hello-World.md file in your IDE to see how the underlying content has been saved with your new changes.