0

I have defined a route in Main component as:

<Route path="/user/:action?/:name?" component={DataForm} />

MainDataCard component:

var data = [ {name: 'abc", label: "ABC", path:"/assets/data/source1.jpg" }, 
             {name: 'pqr", label: "PQR", path:"/assets/data/source2.jpg" },
             {name: 'xyz", label: "XYZ", path:"/assets/data/source3.jpg" },
]

I am iterating over a data array and onClick of each card, I ll be navigating to another component which is DataForm. While pushing, I need to send the selected card object.

{data.map((card, index) => {
        return (
          <Card
            key={index}
            className="cardStyle"
            onClick={() => {
              this.onClickForm(card);
            }}
          >
            <CardContent className="cardContent">
              <Grid container>
                <Grid item md={12}>
                  <img src={card.path} alt="card" />
                </Grid>
                <Grid item md={12}>
                  <Typography color="textSecondary" gutterBottom>
                    {card.name}
                  </Typography>
                </Grid>
              </Grid>
            </CardContent>
          </Card>


       onClickForm = card => {
          const {action} = this.props;  // action value can be add/update. Currently action = "add"
          this.props.history.push({
          pathname: `/user/${action}/${card.label}`,
         state: { card: card }
          });
        };

In DataForm component, its showing that card is undefined. It means the data is not being sent to DataForm component. Why is it so?

Thanks in advance.

norbitrial
  • 14,716
  • 7
  • 32
  • 59
Sangeet
  • 145
  • 3
  • 9
  • Are you using `BrowserRouter` or `HashRouter`? If the answer is `HashRouter` then that's why. Please clarify so I can give you further explanation, thanks! – norbitrial Jan 19 '20 at 12:45
  • I have found my old answer for further explanation why in `` case it does not work to pass state, please read it here: https://stackoverflow.com/questions/59331269/redirecting-to-other-page-using-react-functional-component/59331855#59331855 I hope that helps! – norbitrial Jan 19 '20 at 13:04
  • @norbitrial I am using HashRouter – Sangeet Jan 19 '20 at 13:10
  • Could you please check the mentioned answer, if that helps you to understand why it was failing? I have explained there the reason for a similar scenario. Thanks! – norbitrial Jan 19 '20 at 13:12
  • I have checked the answer. I cannot use BrowserRouter and in my case, I need to send whole object while pushing to another component. How can I pass whole object in query string? – Sangeet Jan 19 '20 at 13:38

0 Answers0