How to pass data to dynamic route in RRD v6?

Question

I have a ContactLis and I want to pass the data of the list items to the ContactDetails page but it doesn't work, console.log(item) in ContactDetaile Component return "undefined". I tried to do this using the useParams hook and filter method;The filter method returns an object, but object.username and object.email were undefined can you please help?

App.js

import {Route, Routes} from "react-router-dom"
import {useState, useEffect} from "react"
import AddContactForm from "./components/AddContactForm"
import ContactList from "./components/ContactList"
import NotFoundPage from "./pages/NotFoundPage"
import ContactDetaile from "./components/ContactDetaile"

const App = () => {
  const [contacts, setContacts] = useState([])

  const addContactHandler = (contact) => {
    setContacts([...contacts, contact])
  }
  useEffect(() => {
    const contactsSaved = JSON.parse(localStorage.getItem("contacts"))
    if (contactsSaved) setContacts(contactsSaved)
  }, [])

  useEffect(() => {
    localStorage.setItem("contacts", JSON.stringify(contacts))
  }, [contacts])
  const deletHandler = (id) => {
    const filteredContacts = contacts.filter((item) => item.id !== id)
    setContacts(filteredContacts)
  }

  return (
    <div className='app'>
      <h3>Contact List !</h3>
      <hr />
      <Routes>
        <Route
          path='/'
          element={<ContactList contacts={contacts} onDelete={deletHandler} />}
        />
        <Route
          path='/add-contact'
          element={<AddContactForm addContactHandler={addContactHandler} />}
        />
        **<Route
          path='/contact/:id'
          element={<ContactDetaile contacts={contacts} />}
        />**
        <Route path='*' element={<NotFoundPage />} />
      </Routes>
    </div>
  )
}

export default App

ContactList.js

import {Link} from "react-router-dom"
import Contact from "./Contact"

const ContactList = ({contacts, onDelete}) => {
  if (contacts.length !== 0) {
    return (
      <>
        <div className='contact-list'>
          {contacts.map((item) => (
            **<Link key={item.id} to={`/contact/${item.id
}`} item={item}>
              <Contact item={item} onDelete={() => onDelete(item.id)} />
              {console.log(item)}
            </Link>**
          ))}
          <Link className='add-link' to='add-contact'>
            Add new contact
          </Link>
        </div>
      </>
    )
  } else {
    return (
      <Link className='add-link' to='add-contact'>
        Add new contact
      </Link>
    )
  }
}

export default ContactList

ContactDetaile.js

const ContactDetaile = ({item}) => {
  console.log(item)

  return (
    <>
      <p>Name:{item.username} </p>
      <p>Email:{item.email} </p>
    </>
  )
}

export default ContactDetaile

score 0 · Answer 1 · answered Mar 07 '22 at 14:36

It was solved with the help of : https://ui.dev/react-router-pass-props-to-link

Change this:

<Link item={item}>...</link>

To this:

<Link state={{item: item}>...<Link/>

and use useLocation() hook in ContactDetaile component as follows:

import {useLocation} from "react-router-dom"

const ContactDetaile = () => {
  const location = useLocation()
  const {item} = location.state

  return (
    <>
      <p>
        <strong>Name: </strong> {item.username}
      </p>
      <p>
        <strong>Email: </strong> {item.email}
      </p>
    </>
  )
}

export default ContactDetaile

How to pass data to dynamic route in RRD v6?

1 Answers1