React value passing from one component to another

user_17818994 0
Viewed 31

I get a username from "login.jsx" and i want to pass it to the "App.js" to access in everywhere. How can I do that?

function App() {
  const [user, setUser] = useState(null);
     
     useEffect(() => {
        
    }, []);
  return (
    <BrowserRouter>
    <Offer/>
    <Navigationbar/>
      <Route path="login" element={user ? <Navigate to="/courses" /> : <Login />} />
    </Routes>
    <Footer />
    </BrowserRouter>

  );
}
reactjs javascript
3 Answers

you can pass callback function to Login component as props and call this prop inside Login component and pass user name as argument, then inside callback function you call setUser function to update the value of user

function App() {
  const [user, setUser] = useState(null);

  const updateUser = (value) => {
      setUser(value);
  }
     
     useEffect(() => {
        
    }, []);
  return (
    <BrowserRouter>
    <Offer/>
    <Navigationbar/>
      <Route path="login" element={user ? <Navigate to="/courses" /> : <Login updateUser={updateUser} />} />
    </Routes>
    <Footer />
    </BrowserRouter>

  );
}
user_87851910

Here is How you can do that

App.jsx

function App() {
  const [user, setUser] = useState(null);
     
     useEffect(() => {
        
    }, []);

  const updateUser = (newUser) => {
     setUser(newUser);
  }

  return (
    <BrowserRouter>
    <Offer/>
    <Navigationbar/>
      <Route path="login" element={user ? <Navigate to="/courses" /> : <Login onNewUser={updateUser} />} />
    </Routes>
    <Footer />
    </BrowserRouter>

  );
}

In Login.jsx when you get new user call props.updateUser(user)

user_76203200

You can do that with React Context;

Basically, contexts are global states. You can read more here : https://reactjs.org/docs/context.html

It allows you to wrap your <App /> into a context provider and pass to your wrapper a value that you will be able to user in your App.

user_197372070
Related