Using typeof on props results in TypeError

Question

I am passing a message when I redirect to login component which is then passed to Loginform as prop

Login.js

class Login extends React.Component {
constructor(props) { super(props);}
render() {
 let msg = "";
 console.log(typeof this.props.location.state); // Always exists
 console.log(typeof this.props.location.state.redirectmsg); // results in typeError
 if(typeof this.props.location.state.redirectmsg!=='undefined') { // results in TypeError
   msg=this.props.location.state.redirectmsg;
 }
 return <Loginform msg={msg} />;
 }
}

Redirect

 const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (false === true ? <Component {...props} /> : <Redirect to={{ pathname: "/login", state: { redirectmsg: "Kindly login first"} }} />)} />);

But when I try to check if its undefined or not it gives me error.Even console.log gives me error.

Answer : Since state key itself is undefined at first

   let msg = ((this.props.location || {}).state || {}).redirectmsg || "";
   return <Loginform msg={msg} />;

https://stackoverflow.com/questions/2631001/test-for-existence-of-nested-javascript-object-key — Teemu, Jul 12 '18 at 04:30
@Teemu I don't need to check nested keys as this.props.location.state always exists as shown. — Vibhas, Jul 12 '18 at 04:35
is this.props.location.state undefined? if that is the case you are trying to access to a property (redirectmsg) of something undefined that will lead to an error. If that is the case I recommend you to check lodash _.get, you can call it in this way _.get(this, 'props.location.state.redirectmsg', default_value_if_something_is_undef), that will avoid to check if this is undef, if prof is undef if location is undef if state is undef, etc. — caraie, Jul 12 '18 at 04:46
please mention how do you pass the redirectmsg to the login component.Seems like redirectmsg is not there in this.props.location.state — Harikrishnan, Jul 12 '18 at 04:58
yes, it exists and it has a value, but the first time it doesn't have a value, check my answer and verify the log appending a +'' in order to break the reference. — caraie, Jul 12 '18 at 05:07
@Vibhas Your question was about the type error, not about showing a message (that is what I answered). — caraie, Jul 12 '18 at 12:11

caraie · Answer 1 · 2018-07-12T06:03:50.037

3

this.props.location.state is being logged in the console with a value because it's referencing to the latest value, so at the beginning it's 'undefined' and then it is updated with another value.

Try replacing

console.log(typeof this.props.location.state);

with

console.log(typeof this.props.location.state + '');

And check if it's undefined or not (I guess it will be undefined this time).

Converting it to a string will break the reference, and you will see it was undefined (the first value of the typeof this.props.location.state).

At that point you was calling this.props.location.state.redirectmsg and that will generate a type error because this.props.location.state was undefined.

For this kind of validation I recommend you to use lodash or underscore _.get (using that get, you can check for deep properties and use a default value if some of the properties are undefined).

Example using lodash get:

let msg = _.get(this, 'props.location.state.redirectmsg', '');

edited Jul 12 '18 at 06:03

answered Jul 12 '18 at 04:58

caraie

1,094
7
18

this is not going to fix the error, I asked you to make this change in order to verify this sentence: console.log(typeof this.props.location.state+''); // Always exists, after appending '', it exists or it's undefined? – caraie Jul 12 '18 at 05:10
if console.log(typeof this.props.location.state+'') (with the appended string) is logging undefined that is because at the begining that value es undefined, and then (some miliseconds later) the parent component of the login is updating the props of the login (for that reason you are seeing a value when the string is not appended). – caraie Jul 12 '18 at 05:16
yes your are right.so state itself is undefined first that's why accessing redirectmsg gives error. – Vibhas Jul 12 '18 at 05:20
You can solve it by rendering the Login component in the parent component only if you have that location.state, or you can validate inside of your login that the state and location are not undefined – caraie Jul 12 '18 at 05:22
Instead of those manual validations I recommend you to check lodash _.get https://lodash.com/docs/4.17.10#get This is a lot nicer: let msg = _.get(this, 'props.location.state.redirectmsg', ''); – caraie Jul 12 '18 at 05:54

score -1 · Answer 2 · answered Jul 12 '18 at 04:35

-1

try undefined without the single quotes

class Login extends React.Component {
constructor(props) {
    super(props);
}
render() {
    let msg = "";
    console.log(typeof this.props.location.state); // Ok
    console.log(typeof this.props.location.state.redirectmsg);
    if (typeof this.props.location.state.redirectmsg !== undefined) {
        msg = this.props.location.state.redirectmsg;
    }
    return <Loginform msg = {
        msg
    }
    />;
}
}

answered Jul 12 '18 at 04:35

Jamil Amini

19
6

Already tried didn't work.Also console.log() line before that gives error first – Vibhas Jul 12 '18 at 04:47
@JamilAmini `typeof yourVariable` always returns a `string`. So, your solution is wrong when u are comparing with `===` because it compares strictly, both type and values. – Abrar Hossain Jul 12 '18 at 06:40

Using typeof on props results in TypeError

2 Answers2