Where should I put states in my React App

Question

I have a Form with 3 states. should I put those states in App.js ? because I'm using separate and custom component for my router called Router.js. this is my App.js and as you can see I don't have any Form component because it is on Home.js. if I put my states to App.js How can I pass them to child component?

so Router.js for states or App.js?

App.js

import { CssBaseline } from "@mui/material";
import "./App.css";
import Navbar from "./views/components/Navbar/Navbar";
import Router from "./routes/Router";
function App() {
  return (
    <div className="main">
      <CssBaseline />
      <Navbar />
      <Router />
    </div>
  );
}

export default App;

Router.js

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "../views/pages/Home";
import Login from "../views/pages/Login";
const Router = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/Home" element={<Home />} />
      <Route path="/Login" element={<Login />} />
    </Routes>
  );
};

export default Router;

Answer 1

If you want to just use that data you can use Context

• Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language

But if you want to change data everywhere it's better to use state managers like Redux

function App() {
const [mainState,setMainstate]=useState({baseline:{},navbar:{},router:{home:{}}});
  return (
    <div className="main">
      <CssBaseline state={mainState} setState={setMainstate}/>
      <Navbar state={mainState} setState={setMainstate} />
      <Router state={mainState} setState={setMainstate} />
    </div>
  );
}

for instance in <Router/>

const Router = ({state,setState}) => {
const sampleChangeState=()=>{
setState({...state,router:{...state.router,home:{color:red}}})
}
  return (
    <Routes>
      <Route path="/" element={<Home state={state.router.home}
setState={setState}
 />} />
      <Route path="/Home" element={<Home />} />
      <Route path="/Login" element={<Login state={state.router.login} />} />
    </Routes>
  );
};

Answer 2

I think you should handle separated states for the components.

• Login should manage all related to login.
• Home should manage all related to the form that you mention.

You can have a callback from login to Router if you want to redirect the user after successful auth.

Answer 3

Passing states from app.js to home component(as props).

import React from "react"
import { CssBaseline } from "@mui/material";
import "./App.css";
import Navbar from "./views/components/Navbar/Navbar";
import Router from "./routes/Router";
function App() {
  const [formStates,setFormStates] = React.useState({
       stateOne : "",
       stateTwo : "",
       stateThree : "",
   });
  return (
    <div className="main">
      <CssBaseline />
      <Navbar />
      <Router formStates={formStates} setFormStates={setFormStates}/>
    </div>
  );
}

export default App;

And In the Router.js

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "../views/pages/Home";
import Login from "../views/pages/Login";
const Router = ({formStates,setFormStates}) => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/Home" element={<Home formStates={formStates}  setFormStates= 
        {setFormStates} />} />
      <Route path="/Login" element={<Login />} />
    </Routes>
  );
};

export default Router;