There's just one small problem... There's no way for us to edit our amazing title from this page. We still have to navigate to our collection, and then to our file, in order to change the title. Let's fix that!

1. Change the Page.tsx file to have the following code:

"use client";
import { useState, useEffect } from "react";
import { client } from "../tina/__generated__/client";
import { useTina } from "tinacms/dist/react";

export default function Home() {

  const[graphQLresponse, setGraphQLresponse] = useState<any>();

  useEffect(() => {
    const fetchContent = async () => {
      const result = await client.queries.my_first_collection({
        relativePath: "Hello-World.md",
      });
      setGraphQLresponse(result);
    };

    fetchContent();
    
  }, []);

  const pageData = useTina({
    data: graphQLresponse?.data,
    query: graphQLresponse?.query,
    variables: graphQLresponse?.variables,
  });

  const amazingTitle = pageData?.data?.my_first_collection?.title;

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <h1>{amazingTitle}</h1>
      </main>
    </div>
  );
}

There are a couple of small, but significant changes here. Let's go through them.

• We are changing out our setAmazingTitle state setter for a new setGraphQLresponse state setter. This is so we have access to the entire GraphQL object for our visual editor.
• We are introducing the useTina method, which is how Tina "wires up" the content we see on the page with the inputs in visual editor. useTina takes an object that includes a few properties from our GraphQL response, so Tina's visual editor can populate its inputs with the same values.

We aren't quite done here. If you open up your browser's Dev Tools and navigate to http://localhost:3000/admin/index.html, you'll see an error appear in your console.

This is actually from how NextJS works – continue on to get your Visual Editor up and runnning.