How can I write to a file from a React component? - node.js

Question

I have a SideNav menu that looks for a file called route.js that has a array inside it called routes. I am trying to change the value of routes in routes.js from another component. I want to be able to add an delete the physical array in the file routes.js from a component. Any help would be appreciated.
import Shop from "examples/Icons/Shop";
// import Office from "examples/Icons/Office";
const routes = [
{
type: "collapse",
name: "Our Mission",
key: "dashboards",
icon: <Shop size="12px" />,
collapse: [
{
name: "Ways We can Help",
key: "default",
route: "/dashboards/default",
component: Default,
},
{
name: "How It Works",
key: "automotive",
route: "/dashboards/automotive",
component: Automotive,
},
{
name: "Who We Are",
key: "smart-home",
route: "/dashboards/smart-home",
component: SmartHome,
},
],
},
{ type: "title", title: " ", key: "space1" },
{
type: "collapse",
name: "Services",
key: "services",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
];
export default routes;
Component accessing the routes.js
import routes from "../../../routes";
const loggedroutes = [
{
type: "collapse",
name: "Profile",
key: "profile",
icon: <CgProfile size="12px" color="blue" />,
route: "/dashboards/Default",
collapse: [],
},
{
type: "collapse",
name: "Calendar",
key: "calendar",
component: link,
route: "/dashboards/Default",
icon: <GoCalendar size="12px" color="blue" />,
collapse: [],
},
]
routes = loggedinroutes;
i want to change the data in routes.js to match the array loggedinroutes

Answer 1

Ok without knowing too much of what you're doing, I put together a quick sandbox on how I would go about this.
https://codesandbox.io/s/hopeful-shirley-q9mhz?file=/src/routes.js
I would basically use logic based on either a button click/state/page query/etc and pass that through a function that would load the routes in your navbar dynamically. in the app.js file you can see how I used the useState() hook with button clicks to dynamically load the routes.
I'm sure there is a more elegant way to accomplish this but I hope this gets you in the right direction!