Get query parameters in React, Typescript

Question

I have a component that looks like this:

class MyView extends React.Component<{}, {}> {
    render() {
        console.log((this.props as any).params); // prints empty object
        return (
            <div>Sample</div>
        );
    }
}

I want to print the URL query params but I get an empty object. (Yes, I know that I declared {} as Props but if I don't define it, it does not compile).

Is there a way to pass a "default" props object to my component so that I can access this.props.params? Or should it be done in a different way in TypeScript?

How do you render this component? Are you passing this param property to it? — Nitzan Tomer
– Nitzan Tomer, Commented Oct 6, 2016 at 23:00

Nitzan Tomer · Accepted Answer · 2016-10-07 12:00:40Z

3

You need to define the types for the props and state and then put them instead of the {}.
It's not clear where you want to get the "URL query params", so I'll just take them from the window.location object:

interface MyViewProperties {
    params: string;
}

interface MyViewState {}

class MyView extends React.Component<MyViewProperties, MyViewState> {
    render() {
        console.log(this.props.params); // should print "param1=value1&param2=value2...."
        return (
            <div>Sample</div>
        );
    }
}

ReactDOM.render(<MyView props={ window.location.search.substring(1) } />, document.getElementById("container"));

answered Oct 7, 2016 at 12:00

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Minas Mina Over a year ago

That was it. Thanks!

Sergio Flores · Accepted Answer · 2016-10-07 00:17:22Z

1

To assign default properties to a component you should use defaultProps:

class MyView extends React.Component<{}, {}> {
    render() {
        console.log((this.props as any).params); // prints empty object
        return (
            <div>Sample</div>
        );
    }
}

MyView.propTypes = {
  url: React.PropTypes.string
}

MyView.defaultProps = {
  url: ''
}

Check the official docs for more information.

edited Oct 7, 2016 at 0:17

answered Oct 6, 2016 at 23:38

Sergio Flores

5,4455 gold badges39 silver badges60 bronze badges

1 Comment

Minas Mina Over a year ago

This does not work for TypeScript. propTypes and defaultProps cannot be "seen" by the compiler.

Collectives™ on Stack Overflow

Get query parameters in React, Typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related