0

I am testing out sending transactions using ReactJS, im new to React so trying to get an understanding on how this would work.

I have a URL paramater -

www.mysite.com?value=10

I can grab that parameter using -

const search = window.location.search;
const params = new URLSearchParams(search);
const value = params.get('value');

And if I console log it I get the correct value -

console.log(value); > 10

But I want to pass the "value" variable to a function on this page -

const sendNewTransaction: RawTransactionType = {

    receiver: "{my address}",
    data: "Send",
    value: value.valueOf(),
    gasLimit: 250000000,
    chainID: chainId.valueOf(),
    gasPrice,
    version,

};

If I just create a new variable for value it works, but not when passing the URL parameter variable.

const value = "10"; > This works
const value = params.get('value'); > This doesnt work

The error I get is -

Object is possibly 'null'.  TS2531

So basically it's saying theres no value right, since it says NULL? Does it have to do with the working value being a string?

Ryan D
  • 741
  • 1
  • 11
  • 29
  • it is because https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get can be null if value param is not set. Put a if check for null and it should not show the error – MePo May 27 '21 at 21:07
  • Thank you, but why is showing Null if there is a value set? Guess im not understanding that part – Ryan D May 27 '21 at 21:18
  • It is because tyescript is showing you that it can be null and thus preventing it from running, if you would not be using TS ( plain JS ) it would ran just fine, but if you would not provide a param it would throw an error – MePo May 27 '21 at 21:22
  • 1
    Ahh ok yeah makes sense, thank you! – Ryan D May 27 '21 at 21:27

1 Answers1

1

This may be not an answer matching your code, but I suggest you to take a look

Apparently you use React, I suggest you to use react-router-dom npm package. It makes easy everything related to the routing and you can get URL parameter easily too with the following code :

import { useParams } from "react-router-dom";

// the component where you need to use the url parameter
function App() {
  const { value } = useParams();

  useEffect(() => {
    console.log("value ", value); <-- will return you param value
  }, [value]);
}

// in a router component where you declare your routes
function Router() {
  <Route path="/app/:value" exact component={App} />
}
VersifiXion
  • 2,152
  • 5
  • 22
  • 40
  • Thank you, is this a better method to use than the one im using? – Ryan D May 27 '21 at 21:19
  • way better, you didn't use react-router-dom on your project yet for the routing ? – VersifiXion May 27 '21 at 21:20
  • 1
    you can also look at this topic https://stackoverflow.com/questions/35352638/react-how-to-get-parameter-value-from-query-string and this answer https://stackoverflow.com/a/48256676/10429169 – VersifiXion May 27 '21 at 21:25
  • 1
    This is a boiler plate example I downloaded, it does have routes and whatnot but im trying to learn as I go here. Ill read through that other topic you posted, thank you! – Ryan D May 27 '21 at 21:28