How to pass props from from parent to grand child when using react-router--dom ?

Question

I sending image path data from parent component(TaskSubmissions.js component) to child component(Card.js component) and same image path data I want to pass child component of Card which is CardDetail.js.

Problem is data is passed from TaskSubmissions.js to Card.js but it's not getting passed from Card.js to DetailCard.js

I am using react-router-dom . To understand it better below I am sharing all three components code. I'll appreciate your help. P.S I am new to react and trying to understand the flow with such experiments.

Data Flow = image URL is passing from TaskSubmission.js to -> Card.js to -> DetailCard.js

Parent Component TaskSubmissions.js

import React from "react";
import Card from "../components/Card";

const TaskSubmissions = () => {
  return (
    <div className="container-fluid">
      <div className="row justify-content-center mt-5">
        <h1 className="text-info display-4 text-center">
          Review All Students Task!
        </h1>
      </div>

      <div className="row justify-content-center">
        <p className="lead text-center">Rate your students performance</p>
      </div>

      <div className="row justify-content-center mt-5">
        <div className="col-lg-3 col-md-4 col-sm-12">
          <Card
            name="Jane"
            path="https://source.unsplash.com/aob0ukAYfuI/400x300"
          />
        </div>
      </div>
    </div>
  );
};

export default TaskSubmissions;

Child Component Card.js

import React from "react";
import { Link } from "react-router-dom";

const Card = (props) => {
  return (
    <div className="container-fluid">
      <div className="row">
        <h4 className="card-title">{props.name}</h4>
        <Link
          to={{
            pathname: "/detail",
            state: { imgpath: props.path, name: props.name },
          }}
          className="d-block mb-4 h-100"
        >
          <img
            className="img-fluid img-thumbnail"
            src={props.path}
            alt="image"
          />
        </Link>
      </div>
    </div>
  );
};
export default Card;

GrandChild Component CardDetail.js

import React from "react";
import { useLocation } from "react-router";

const CardDetail = (props) => {
  const data = useLocation();
  return (
    <div className="container-fluid">
      <div className="row justify-content-center">
        <div className="card mb-3">
          <img src={data.imgpath} className="card-img-top" alt="..." />
          <div className="card-body">
            <h5 className="card-title">{data.name}</h5>
            <p className="card-text">Assignment 1 is completed.</p>
            <p className="card-text">
              <small className="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardDetail;

i cant see that you're using `CardDetail` in `Card` ??? and there isn't any usage of `props` in `CardDetail` also... — yaya, Aug 05 '20 at 21:37
As you can see `` in Card,js it;s targeting CardDetail. I've made a route path in App.js component for this — user9824674, Aug 05 '20 at 22:06
you could add to the url query some data if you want, thats probably the best method if you are just trying to pass a link url thru to CardDetail -> https://reactrouter.com/web/example/query-parameters — Eric Hasselbring, Aug 05 '20 at 22:08
@user9824674 then `CardDetail` is not the child of `Card`. in setting up routes, you can pass params to it, based on the id in url. (https://stackoverflow.com/questions/51226685/reactjs-component-vs-render-in-route) — yaya, Aug 05 '20 at 22:14
@yaya well, it is. I have setup the routes in App.js where I already defined route for CardDetail too as . — user9824674, Aug 06 '20 at 16:55
@user9824674 `` sets the url of the page, and `CardDetail` will replace the whole page. it won't render inside of `Card` as you expect. — yaya, Aug 06 '20 at 17:01
@yaya Oh I see you're right. Then how should I pass data? The main purpose is when user click on card then detailcard should open with same image that is passed as props from parent component to card.js. Thank you so much! — user9824674, Aug 06 '20 at 17:14
@user9824674 no problem, why i feel it's already answered? oh i found it... it's some comments above, it starts with : `then CardDetail is not the child of Card. in setting up routes, you can pass params to it, based on the id in url` — yaya, Aug 06 '20 at 17:24

score 1 · Answer 1 · answered Aug 05 '20 at 22:11

Try accessing it differently. You are currently doing const data = useLocation(); and then data.imgpath. Have you tried console.log(data)?

I would suggest the following change:

<img src={data.state.imgpath} className="card-img-top" alt="..."/> <h5 className="card-title">{data.state.name}</h5>

Since you've stored it in

{{pathname: "/detail", state: {imgpath: props.path, name: props.name}}}

So it is held in data.state.

data Object should look something like this:

{
  ...
  pathname: '/detail',
  state: {
    name: 'bar',
    imgpath: 'foo'
  }
}

Thank you to giving your effort but I tried this already. Actually, in my console it showing the state is undefined. I tried console.log(data) in my CardDetail.js — user9824674, Aug 06 '20 at 16:51

How to pass props from from parent to grand child when using react-router--dom ?

1 Answers1