Property 'match' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>

Question

So I have recently converted a ReactJs project from ES6 JavaScript to TypeScript and had a wave of errors that I had to work through. One of the final errors that occurs and I cannot seem to find a fix for it for the section of code

async componentDidMount() {
    const { pokemonIndex } = this.props.match.params;

    // Urls for pokemon information
    const pokemonUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonIndex}/`;
    const pokemonSpeciesUrl = `https://pokeapi.co/api/v2/pokemon-species/${pokemonIndex}/`;

    // Get Pokemon Information
    const pokemonRes = await axios.get(pokemonUrl);

    const name = pokemonRes.data.name;
    const imageUrl = pokemonRes.data.sprites.front_default;

    let { hp, attack, defense, speed, specialAttack, specialDefense }: any = "";

    pokemonRes.data.stats.map(
      (stat: { [x: string]: any; stat: { name: any } }) => {
        switch (stat.stat.name) {
          case "hp":
            hp = stat["base_stat"];
            break;
          case "attack":
            attack = stat["base_stat"];
            break;
          case "defense":
            defense = stat["base_stat"];
            break;
          case "speed":
            speed = stat["base_stat"];
            break;
          case "special-attack":
            specialAttack = stat["base_stat"];
            break;
          case "special-defense":
            specialDefense = stat["base_stat"];
            break;
          default:
            break;
        }
      }
    );

And more specifically on the line

const { pokemonIndex } = this.props.match.params;

What is the reason for this?

----------------EDIT----------------------------------

The code below is that of my App.tsx with the routing I've used

import React, { Component } from "react";
import "./App.css";
import NavBar from "./components/layout/NavBar";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Dashboard from "./components/layout/Dashboard";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Pokemon from "./components/pokemon/Pokemon";

class App extends Component {
  constructor() {
    super({});
    this.state = {};
  }

  render() {
    return (
      <Router>
        <div className="App">
          <NavBar />
          <div className="container">
            <Switch>
              <Route exact path="/" component={Dashboard} />
              <Route exact path="/pokemon/:pokemonIndex" component={Pokemon} />
              <Dashboard />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

Seems that it tries to get pokemonIndex value out of React Routing Params. And later this pokemonIndex is used to build new URLs as seen in source code you provide. — Sergey M, Sep 24 '19 at 10:08
@SergeyM What do you mean by this? am I supposed to use a TS routing param now? — zadders, Sep 24 '19 at 10:25
Does this answer your question? [Property 'value' does not exist on type 'Readonly<{}>'](https://stackoverflow.com/questions/47561848/property-value-does-not-exist-on-type-readonly) — Michael Freidgeim, Oct 01 '20 at 08:36

score 1 · Accepted Answer · answered Sep 25 '19 at 10:59

type TRouteParams = {
    pokemonIndex: string; // since it route params
}

Then you can use this type for RouteComponentProps interface which stands for this.props.match.params

interface IPokemonPageProps extends RouteComponentProps<TRouteParams>, React.Props<TRouteParams> {
    ....
}

Now you should be able to access you prop like this:

const { pokemonIndex } = this.props.match.params;

Property 'match' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>

1 Answers1