passing props with from react router dom using state props

Question

I'm reading data from an api and storing it in the projekter variable (useState). When I map the variable all the values are shown, but when I try to pass the the values to an another component through the link, I get or undefined or can not read properties of undefined ("reading state")

Any suggestions or ideas?

Here I'm getting the data through the getContentData func and storing it in the projekter variable

import mistoContentful from "../Helpers/mistoContentful";

const ProjektMain = () => {
  const [projekter, setProjekter] = useState([]);
  const { getContentData } = mistoContentful();

  useEffect(() => {
    getContentData().then((response) => setProjekter(response));
  }, [getContentData]);

  return (
    <div className="projektMain">

I then map the variable and everything works so far, but the problem is when I try to pass the data trough the state props to the component SingularProjekt

<div className=" gridContainer grid gap-6 grid-flow-row justify-center mt-60 mb-40 md:grid-cols-3 md:mx-11 xl:mx-16 2xl:mx-auto 2xl:max-w-max 2xl:gap-14 ">
  {projekter.map((projektInfo) => (
    <div
      key={projektInfo.id}
      className=" gridItem box-border aspect-square 2xl:max-w-[30rem] relative"
    >
      <Link
        key={projektInfo.id}
        to={{
          pathname: "/SingularProjekt",
          state: { info: projektInfo },
        }}
      >
        <img
          className=" object-cover bg-cover h-full hover:border-[#D4B572] hover:border-4"
          src={projektInfo.projectCover}
        />

        <div className="absolute text-center opacity-90 bottom-0 bg-slate-500 w-[100%] h-[1.5rem] 2xl:h-8">
          <p className=" font-oswald opacity-100 2xl:text-xl">
            {projektInfo.projectTitle}
            {/* {console.log(projektInfo)} */}
          </p>
        </div>
      </Link>
    </div>

Component where I want to pass the data trough the state props of the <Link> comp, I get the error of undefined or cannot read undefined (reading state).

const SingularProjekt = (props) => {
  const { projektInfo } = props.location.state;

  return (
    <div className=" bg-[#666E70] h-full ">
      <Nav />
      <div className="flex  relative md:max-w-[95%] lg:pt-10 2xl:max-w-[100rem] 2xl:mx-auto">
        <img className="md:pl-5" src={tapas} />
        <div className=" divShadow1 flex items-center justify-center bg-[#505E57] aspect-square absolute bottom-[-11%] right-3 text-center   ">
          <p className=" font-oswald text-base max-w-[80%] md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl">
            Ho`s Tapas{console.log(projektInfo)}
          </p>
        </div>

Which version of react-router-dom are you using? – Abbas Bagheri Feb 22 '23 at 10:08 — Abbas Bagheri, Feb 22 '23 at 10:08

score 0 · Answer 1 · edited Feb 24 '23 at 15:37

0

try using " ? " :

const SingularProjekt = (props) => {
    const { projektInfo } = props.location?.state;

edited Feb 24 '23 at 15:37

stramin

2,183
3
29
58

answered Feb 22 '23 at 09:40

umer shaik

15
4

thanks for the response, i tried it now and I got this message "Uncaught TypeError: Cannot destructure property 'info' of '(intermediate value)' as it is undefined.", don't know why its not working – Ephraim Valladares Cordova Feb 22 '23 at 17:16

score 0 · Answer 2 · answered Feb 22 '23 at 10:48

0

You are setting key name as "info" while navigating;

...
                       <Link
                            key={projektInfo.id}
                            to={{
                                pathname: "/SingularProjekt",
                                state: { info: projektInfo },//variable name is info now
                            }}
                        >
...

When accessing the variable, you should change this

...
const SingularProjekt = (props) => {
    const { projektInfo } = props.location.state;
...

to this:

...
const SingularProjekt = (props) => {
        const { info } = props.location.state;
...

answered Feb 22 '23 at 10:48

Hamza Mushtaq

101
5

thank for the response, i tried it now and I get the error of " Uncaught TypeError: Cannot read properties of undefined (reading 'state')" , do you know another way to do this ? – Ephraim Valladares Cordova Feb 22 '23 at 17:11
@EphraimValladaresCordova It seems that is because `props.location` is undefined. RRDv6 doesn't have any route props, access `location` via the `useLocation` hook. See the marked duplicate for explanation & examples. – Drew Reese Feb 22 '23 at 17:26
i tried it, but it still shows as undefined, I don't understand why, as soon as I pass it as props it becomes undefined when I console log it – Ephraim Valladares Cordova Feb 22 '23 at 21:55
i realized why it was undefined, to pas the props, the user has to start at the sending component, when the link is clicked the it sends props data to the receiving component and then it stop being undefined. i guess it was a rookie mistake. thanks for the help appreciate it – Ephraim Valladares Cordova Feb 22 '23 at 23:44

passing props with from react router dom using state props

2 Answers2