This is more of a Layout thing where in our layout we all have header section and the main content and then a footer. So today we will learn to develop buttons in our header which will work on all the routes our our application and for all the forms of our application. We know that when routes change header and footer mostly remains the same and only the main content change. 


# We will learn to use **createContext**, **useRef**, **useImperativeHandle** mainly along with similar funtionalities.

Before starting to code here is the overview - 
- For the common Save button (from header) to work for various routes and forms, we will have to create and pass a Ref so as to indentify the current form which is done by ref.current
- This ref will directly trigger the form onSubmit function, not from the form page itself but from the header section.
- The current form is recognized by ref.current
- For the delete functionality we will create and pass a different ref bcause here we dont want to access a direct form method (as onSubmit in above case)
- You can create multiple button for functions related to a form based on this delete button fuctinality and all will work the same way. for example to update, to delete or for anything common in all forms. 
- When the common funtionality is not required in any form, you can always disable the button for that specific form. 

I'm using React 19 in my example - 

### App js -
First we will create two refs - 

```
function App() {
  const saveRef = useRef<any>(null);
  const imperativeRef = useRef<any>(null);

```
and two functions for the button - 

```
  const addNew = () => {
    saveRef.current.requestSubmit();
  };
  const deleteThis = () => {
    imperativeRef.current.deleteChild();
  };

```
and then a ref object - 

```
  const refs: any = { saveRef, imperativeRef };

```

We have to pass this ref to all of our child component and for the same we will create a **Context**

In a  new file we will create our context - 

### In file myContext.tsx

```
import { createContext } from "react";
export const RefContext = createContext(null);
```

### Back in App.js

We will import the  context and then pass this context to everywhere in our app, 
 
 then we can create the header buttons in app.js file 
 
```
<button className="bg-[#d9d9d9] px-3 rounded" onClick={addNew}>
  Save
</button>
<button className="bg-[#d9d9d9] px-3 rounded" onClick={deleteThis}>
  Other Functions
</button>

```
 the button on click will target the above functions create which will  target the ref.current, the ref.current will be of the form instance currenly  based on the route.
 
Lets  us now create Routes for our app, using react-router-dom 


```
  const Routerr = createBrowserRouter([
    {
      path: "/first",
      element: <First />,
    },
    {
      path: "/second",
      element: <Second />,
    },
  ]);

```

Here, First and Second are my two forms components that I will show how common button works.

So the complete App.js will look like - 


```
import { useRef } from "react";
import { RefContext } from "./myContext";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import First from "./first";
import Second from "./second";

function App() {
  const saveRef = useRef<any>(null);
  const imperativeRef = useRef<any>(null);

  const addNew = () => {
    saveRef.current.requestSubmit();
  };
  const deleteThis = () => {
    imperativeRef.current.deleteChild();
  };

  const refs: any = { saveRef, imperativeRef };

  const Routerr = createBrowserRouter([
    {
      path: "/first",
      element: <First />,
    },
    {
      path: "/second",
      element: <Second />,
    },
  ]);

  return (
    <div>
      <div className="flex gap-x-2 bg-[#bae7ff] py-2">
        <p>header menu set in layout</p>
        <button className="bg-[#d9d9d9] px-3 rounded" onClick={addNew}>
          Save
        </button>
        <button className="bg-[#d9d9d9] px-3 rounded" onClick={deleteThis}>
          Other Functions
        </button>
      </div>
      <RefContext.Provider value={refs}>
        <RouterProvider router={Routerr} />;
      </RefContext.Provider>
    </div>
  );
}

export default App;

```

You can see the headers will have common button and when route changes only the component based on route will change. 

We also wrapped our RouterProvider with our Context data, this is done to get the ref values in all of our route segments (in all our forms, components)

### Next we will create our First and Second Component 

Our first and second forms component will look like this- 

![Screenshot from 2025-09-30 06-07-59.png](https://api.ranuvijay.me/uploads/Screenshot_from_2025_09_30_06_07_59_6a18d99570.png)

### First.tsx


```
import { useContext, useImperativeHandle } from "react";
import { RefContext } from "./myContext";

export default function First() {
  const { saveRef, imperativeRef } = useContext<any>(RefContext);
  const formDeleteId = "123";

  const onFormSubmit = (e: any) => {
    e.preventDefault();
    console.log("first save");
  };

  useImperativeHandle(imperativeRef, () => ({
    deleteChild: () => {
      // deleteFRomDataBaseFunction(formDeleteId);
      console.log("formDeleteId", formDeleteId);
    },
  }));

  return (
    <div>
      <p className="py-6"> This is my first form</p>
      <form ref={saveRef} onSubmit={onFormSubmit}>
        <label>First Name</label>
        <input
          type="text"
          id="fname"
          name="fname"
          className="bordered border-2 border-[#000]"
        />
        <br />
        <label>Second Name</label>
        <input
          type="text"
          id="fname"
          name="fname"
          className="bordered border-2 border-[#000]"
        />
      </form>
    </div>
  );
}


```

the same will be for the second.tsx file also, I hope you can write that yourself. 

**saveRef** from App.js is used to map against the onSubmit function of the form and for delete we are using **useImperativeHandle** function of the react. 

this useImperativeHandle funtion or our second function can be used for many other things for the app, for example to refetch the data, update the form and here in my case I have shown the example to delete the form instance .

I f we click the save button from the header and onSubmit function of the form will be called. 

and if we click the Other Button from the header our delete functin will be called. 

As you can the delete function can take the form instance {id} from the page (which I have not showed here, and manually put an Id) and so clicking the header will call the delete function. 

Thats all for now!

Thanks

We will create two buttons in the header section of the layout, Save and Delete and even when we change the route, these buttons will work for all the routes and  forms in our application, to submit and save a form and to delete.

Common Form Save and Delete button

Contact Me

I want to hear from you