0

I´m pretty new to Typescript and to be honest I still struggle a lot with very basic functions. My situation is this: I have an array with objects (8 attributes per object). On my page I loop through this array and display some of the data for each object. For every displayed object there is a Button/ Link through which I link to the next page (zuBewrtenderTest.tsx). I want to pass one attribute (UniqueID) from the selected object to the next page so I can access the right object from the array again. Anyhow I dont know how to pass the data/ access it. Using the redux store for this seems a little bit of an overkill to me because I really just need to pass this one int.

I tried this solution: Passing Data to Another Component OnClick --> But I cant get it to work because this and props is not allowed anymore in typescript

This is my code

function tests() {

  //Test Navigation
  <Route path="/zuBewertenderTest/:name" exact component={ZuBewertenderTest}></Route>

  //Test um

  const classes = UseStyles();

  return (
      
      <div className={classes.root}>      
        <Grid className="container" container spacing={3}>
          <Grid item xs={12}>
            <Paper className={classes.paper}></Paper>
          </Grid>

          {testDaten.map((item, key) => {
            return (
            <Grid item xs={4} sm={4} key={item.UniqueId}>
              <Input value={item.UniqueId} type="number" id="idTest"/> 
              <Paper className={classes.paper}> Besucher-Id: {item.UniqueId} </Paper>
              <Paper className={classes.paper}> Name: {item.Vorname} {item.Nachname}</Paper>
              <Paper className={classes.paper}> Nachweisart: {item.Nachweisart} </Paper> 
              <Paper className={classes.paper}>   <Link to={`/zuBewertenderTest/${item.UniqueId}`}>More info</Link> </Paper> 
            </Grid>
          )
          })}
        </Grid>
      </div>
      
  );
}
KingRaidi
  • 51
  • 9

1 Answers1

1

If you are looking to pass any data from your url it can be done using url query.

If you need to pass multiple values this way Passing a single value:

<Link to={`/URL/${item.UniqueId}?uniqueIdentifier={$uniqueValue}`}>More info</Link>

Multiple values can be passed simply by using '&' each time.

Bonus! You can also send an object in query string by using

const obj={val1:"value1",val2:"value2"}
const queryString = queryString.stringify(obj);
<Link to={`/URL/${item.UniqueId}?${queryString}`}>More info</Link>

On the target page you can easily get query params from url by using react-router useLocation hook and query-string package to parse your query:

import queryString from 'query-string'
import { useLocation } from 'react-router-dom'

    const { search } = useLocation()
    const values = queryString.parse(search)
    console.log(values.filter)
    console.log(values.origin)
PRATIK NAIK
  • 489
  • 3
  • 7
  • Thanks for the quick answer! Anyhow in the second component I get this error on the query String import "Could not find a declaration file for module 'query-string'. 'c:/Users/Luis/Desktop/Webseite_Exentra/New/veranstalter-webapp/node_modules/query-string/index.js' implicitly has an 'any' type. Try `npm i --save-dev @types/query-string` if it exists or add a new declaration (.d.ts) file containing `declare module 'query-string';`ts(7016)" --> I tried npm i --save-dev @types/query-string but it didnt work, the index.js does exist though – KingRaidi Jun 13 '21 at 18:06
  • I also tried: npm install @types/query-string --> didnt help – KingRaidi Jun 13 '21 at 18:11
  • Did u try re-starting your server after you installed? – PRATIK NAIK Jun 14 '21 at 03:35
  • Hey, I can do it but I fixed the problem with "window.location.path" --> I just need a int so I append that to the url and take it from there. It´s not really best practice but its just a university project so its not that important. – KingRaidi Jun 14 '21 at 15:26
  • If I have answered your question can you close this ? – PRATIK NAIK Jun 14 '21 at 16:20