Not able to Pass information throught link in react route

Question

I'm not able to pass information using props through link in react route. I tried to pass the current contact got through a component in the contact card and passing the same prop to contact details but I'm not able to fetch the object sent by me in the contact details getting undefined when consoling the props.

import React, { useState } from 'react';
import user from "../images/user.png";
import { Link } from "react-router-dom";

function ContactCard(props) {
  const [data, setData] = useState(props.contact)
  const { id, name, email, mobile } = props.contact;

  return (
    <div>
      <div className="item">
        <div className="ui avtar image">
          <img src={user} alt="user" />
        </div>
        <div className="content">
          <Link to={{ pathname: `/contact/${id}`, state: { data: data }}}>
            <div className="header">{name}</div>
            <div>{email}</div>
            <div>{mobile}</div>
          </Link>
        </div>
        <i
          className="trash alternate outline icon"
          style={{ color: 'red', marginTop: '7px' }}
          onClick={() => props.clickHandler(id)}
        ></i>
      </div>
    </div>
  );
}

export default ContactCard;

import React from 'react';
import { useLocation } from 'react-router-dom';
import user from "../images/user.png";

function ContactDetails(props) {
    const location = useLocation();
    console.log(props, "props");
    const data = location.state?.data;
    console.log(data);
//   const { contact } = props.location.state;
//   const { id, name, email, mobile } = contact;

  return (
    <div className="main">
      <div className="ui card centered">
        <div className="image">
          <img src={user} alt="user" />
        </div>
        <div className="content">
          <div className="header">name</div>
          <div className="description">email</div>
          <div className="description">mobile</div>
        </div>
      </div>
    </div>
  );
}

export default ContactDetails;

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { v4 as uuid } from "uuid";
import './App.css';
import Header from "./Header";
import AddContact from "./AddContact";
import ContactList from "./Contactlist";
import ContactDetails from "./ContactDetails";

function App() {
  const LOCAL_STORAGE_KEY = "contacts";

  const [contacts, setContacts] = useState(
    JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []
  );

  const addHandler = (contact) => {
    console.log(contact);
    setContacts([...contacts, { id: uuid(), ...contact }]);
  };

  const removeContactHandler = (id) => {
    const newContactList = contacts.filter((contact) => {
      return contact.id !== id;
    });

    setContacts(newContactList);
  }

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  }, [contacts]);

  return (
    <div className="ui container">
      <Router>
        <Header />
        <div className="content">
          <Routes>
            <Route path="/" element={<ContactList contacts={contacts} getContactId={removeContactHandler} />} />
            <Route path="/add" element={<AddContact addHandler={addHandler} />} />
            <Route
              path="/contact/:id"
              element={<ContactDetails/>}
            />
          </Routes>
        </div>
      </Router>
    </div>
  );
}

export default App;

score 3 · Answer 1 · answered Jul 06 '23 at 09:32

In ContactDetails, you are logging props to the console, but there is no props passed to the component but only location that's why props is undefined.

here you are passing props :

<ContactList 
  contacts={contacts} 
  getContactId={removeContactHandler} 
/>

here not:

<ContactDetails/>

also as mentioned in the other answer, as far as I know this is the correct syntax:

<Link to={`/contact/${id}`} state={{ data }}></Link>

score 1 · Accepted Answer · answered Jul 06 '23 at 09:19

Maybe you should try passing the required value through the <Link></Link> in the following manner:

<Link to={} state={{ data: data }}></Link>

It appears that you've placed the state prop within the to prop's value. In any case do let us know whether or not the change worked. Good luck!

Not able to Pass information throught link in react route

2 Answers2