One component affecting another in reactjs

Question

Every url loads three main components: Left panel, center and right panel. In right panel, we have a button which returns a sub-component CreateForm inside the right panel. Left panel contains links which returns individual sub-component to left panel.

Here, the problem is every sub-component of the left panel changes url and thus loads three main components; so if current state of form is open on the right panel and if we select any links in the left panel sub-component, we get the right panel reloaded again so we cannot stay to form.

How can I solve that?

Answer 1

We had use useEffect, localstorage for storing state of the contact form and do form component code inside rightpanel component only(without calling separate component for form on click). This worked well.