How To Navigate To Another Functional Component and Pass a Value in ReactJs

Question

I want to pass a specific user's id from a list of users that I have in my Dashboard. I have a button that is called Expand, when I click this button it would take me to another page that would show me all the user's info and details.

I am trying to pass the user's id to be able to fetch the specified user's info from my DB

I am moving from CustomersList Page when I click the expand button to CustomerProfile Page.

but on the second page, I get the value as undefined.

My Code:

const CustomerList = () => {
  const navigate = useNavigate();
  const [data, setData] = useState([]);
  const [id, setID] = useState("");
  const list = []
  useEffect(() => {
    firebase.firestore().collection("Users").get().then((userSnapshot) => {

      userSnapshot.forEach((doc) => {
       
        const {powerAccount,first_name,registerDate,email,company,country,phone} = doc.data();
        list.push({
          usersID:doc.id,
          powerAccount:powerAccount,
          first_name:first_name,
          registerDate:registerDate,
          email:email,
          company:company,
          country:country,
          phone:phone,
        });
       
      })
      setData(list);
      console.log(list)

    })
  
  },[]);

 return (
          <Button
           color="primary"
           variant="contained"
            onClick={()=>{
            navigate('/app/CustomerDetails', { state: { id: data.usersID } });//this is how i am navigating and passing the value
                  }}
                >
                Expand
           </Button>
)

and in my second page:

const CustomerProfile = (props) => {

  const {state} = useLocation();
  const { id } = state; // Read values passed on state
  console.log(id)//here i get this log as undefined
  const [name,setName] = useState("");

  useEffect(() => {

    firebase.firestore().collection("Users").doc(id).get().then((userSnapshot) => {

      console.log(userSnapshot.data())// here i get this log as undefined
    })
  
  },[]);
}

what am i doing wrong?

EDIT:

this is my routes.js file:

const routes = [
  {
    path: 'app',
    element: <DashboardLayout />,
    children: [
      { path: 'account', element: <Account /> },
      { path: 'customers', element: <CustomerList /> },
      { path: 'CustomerDetails', element: <CustomerDetails /> },
      { path: 'ReportDetails', element: <ReportDetails /> },
      { path: 'report', element: <ReportList /> },
      { path: 'freight', element: <FreightList /> },
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'analytics', element: <Analytics /> },
      { path: 'products', element: <ProductList /> },
      { path: 'settings', element: <Settings /> },
      { path: '*', element: <Navigate to="/404" /> }
    ]
  },
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { path: 'login', element: <Login /> },
      { path: 'register', element: <Register /> },
      // { path: '404', element: <NotFound /> },
      { path: '/', element: <Navigate to="/login" /> },
      { path: '*', element: <Navigate to="/app/dashboard" /> }
    ]
  }
];

ksav · Accepted Answer · 2021-10-25 04:28:11Z

2

There is a new useHistory hook in React Router >5.1.0 if you are using React >16.8.0 and functional components. Your Route is like this for passing id.

      <Switch>
        <Route exact path="/form" component={Form} />
        <Route exact path="/data/:id" component={Formdata} />
      </Switch>

then from where you want to paas id use useHistory hook from react-router-dom.

  const HandleSubmit = (e) => {
    e.preventDefault();
    history.push(`/data/${initstate}`);
  };

and finally where you want the id use useParms hooks to get the id:

 let params = useParams();
 setUserID(params.id);

edited Oct 25, 2021 at 4:28

ksav

20.9k6 gold badges52 silver badges69 bronze badges

answered Oct 25, 2021 at 4:18

Manish Jha

3553 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

motionless570 Over a year ago

can u see my edited question and tell me how i would do this in my case?

Collectives™ on Stack Overflow

How To Navigate To Another Functional Component and Pass a Value in ReactJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related