TypeError: Cannot read property 'params' of undefined (React/TypeScript)

Question

SitePage.tsx

import { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

interface Props {
  id: any,
  site: any,
  match: any
}

export class SitePage extends Component<any> {
  state = {
    site: {},
    isLoaded: false
  }

  componentDidMount() {
    axios.get(process.env.REACT_APP_SITES_URL + `/${this.props.match.params.id}`)
      .then(res => this.setState({
        site: res.data,
        isLoaded: true
      }))
      .catch(err => console.log(err))
  }

  render() {
    const { site, isLoaded } = this.state;
    return (
      <>
        <Link to="/">Go Back</Link>
        {/* <h1>{ site[0].title }</h1> */}
      </>
    )
  }
}

export default SitePage

App.tsx

import { lazy, Suspense } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { MessagingProvider } from "../context/messaging/MessagingContext";
import Auth0ProviderWithHistory from '../auth/Auth0ProviderWithHistory';
import Auth0Wrapper from "../auth/Auth0Wrapper";
import ErrorBoundary from "../../utils/components/ErrorBoundary";
import TopBar from "../navigation/TopBar";
import { LoadingBackdrop } from "../../utils/components/Backdrops";

const HomePage = (
  lazy(() => (
    import(/* webpackChunkName: "HomePage" */"./HomePage"))
  )
);

const Sites = (
  lazy(() => (
    import(/* webpackChunkName: "Sites" */"../sites/main/SitesMain"))
  )
);

const SitePage = (
  lazy(() => (
    import(/* webpackChunkName: "SitePage" */"../sites/main/SitePage"))
  )
);

const Projects = (
  lazy(() => (
    import(/* webpackChunkName: "Projects" */"../projects/main/ProjectsMain"))
  )
);

const App = (): JSX.Element => (
  <MessagingProvider>
    <Router>
      <Auth0ProviderWithHistory>
        <ErrorBoundary>
          <TopBar />
          <Suspense fallback={<LoadingBackdrop loading text="Loading Development Hub" />}>
            <Auth0Wrapper>
              <main className="container">
                <Routes>
                  <Route path="/" element={<HomePage />} />
                  <Route path="/sites" element={<Sites />}></Route>
                  <Route path="/sites/:id" element={<SitePage />}></Route>
                  <Route path="/projects" element={<Projects />}></Route>
                </Routes>
              </main>
            </Auth0Wrapper>
          </Suspense>
        </ErrorBoundary>
      </Auth0ProviderWithHistory>
    </Router>
  </MessagingProvider>
)

export default App;

SiteItem.tsx

import { Component } from 'react'
import { Link } from "react-router-dom";

interface Props {
  site: any,
}

export class SiteItem extends Component<Props> {
  render() {
    const {
      id,
      title,
      deployment_location,
      host,
      maintenance,
      protected_by_cloudflare,
      last_updated,
      assigned_to
    } = this.props.site;
    return (
      <div className="col-md-4">
        <div className="card shadow mb-4">
          <div className="card-body">
            <h5 className="card-title">
              <Link to={`/sites/${ id }`}>{ title }</Link>
            </h5>
            <div className="card mb-3">
              <table className="table table-borderless" style={{ marginBottom: "0px" }}>
                <tbody>
                  <tr className="border-bottom">
                    <th scope="row">Location</th>
                    <td>{ deployment_location }</td>
                  </tr>
                  <tr className="border-bottom">
                    <th scope="row">Hosted by us</th>
                    <td>{ host }</td>
                  </tr>
                  <tr className="border-bottom">
                    <th scope="row">Maintained by us</th>
                    <td>{ maintenance }</td>
                  </tr>
                  <tr className="border-bottom">
                    <th scope="row">Cloudflare Protected</th>
                    <td>{ protected_by_cloudflare }</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div className="card p-2 mb-3">
              <div>
                <p className="p-0 m-0">
                  <strong>Last Updated:</strong>
                  <span className="p-0 m-0"> { last_updated }</span>
                </p>
              </div>
            </div>
            <div className="card p-2 mb-3">
              <div>
                <p className="p-0 m-0">
                  <strong>Assigned To:</strong>
                  <span className="p-0 m-0"> { assigned_to }</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default SiteItem

Does anyone know what is causing this issue? I don't think I'm passing something correctly.

I've tried messing with the Props as you can see an Interface, but I ended up just using <any> The route works fine it seems, but it's not getting the id properly. I've also searched many times around on here but couldn't find a solid answer.

Thanks in advance.

Cameron Cameron · Accepted Answer · 2021-07-22T20:23:44

Nothing I got here was that useful so I rewrote the code after a lot of research.

This worked:

SitePage.tsx

import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { LoadingBackdrop } from "../../../utils/components/Backdrops";
import axios from "axios";

const SitePage = (): JSX.Element => {
  const { id } = useParams();
  const [site, setSite] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getSiteData();
  }, []);

  const getSiteData = () => {
    axios.get(process.env.REACT_APP_SITES_URL + `/${id}`)
      .then((res) => {
        setSite(res.data);
      })
      .catch(err => console.log(err))
  }

  if (site != null) {
    return (
      <>
        <Link to="/">Go Back</Link>
        <div className="row mt-3">
          <div className="col-12">
            <div className="card shadow">
              <div className="card-body">
                <h1 className="card-title">{site.title}</h1>
                <div className="card p-2 mb-3">
                  <p className="m-0 p-0">
                    <strong>Deployment Location: </strong>
                    {site.deployment_location}
                  </p>
                  <p className="m-0 p-0">
                    <strong>Hosted by us: </strong>
                    {site.host}
                  </p>
                  <p className="m-0 p-0">
                    <strong>Maintained by us: </strong>
                    {site.maintenance}
                  </p>
                  <p className="m-0 p-0">
                    <strong>Cloudflare Protected: </strong>
                    {site.protected_by_cloudflare}
                  </p>
                </div>
                <div className="card p-2 mb-3">
                  <p className="m-0 p-0">
                    <strong>PHP Version: </strong>
                    {site.php_version}
                  </p>
                  <p className="m-0 p-0">
                    <strong>WP Version: </strong>
                    {site.wordpress_version}
                  </p>
                  <p className="m-0 p-0">
                    <strong>Last Updated: </strong>
                    {site.last_updated}
                  </p>
                </div>
                <div className="card p-2 mb-3">
                  <p className="m-0 p-0">
                    <strong>Git Location: </strong>
                    {site.git_location}
                  </p>
                  <p className="m-0 p-0">
                    <strong>DB Location: </strong>
                    {site.database_location}
                  </p>
                </div>
                <h3 className="pb-2">Notes</h3>
                <div dangerouslySetInnerHTML={{ __html: site.notes }} className="card p-2 mb-3"></div>
                <h3 className="pb-2">Logs</h3>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  } else {
    return (
      <LoadingBackdrop loading={loading} text="Loading Site" />
    )
  }
}

export default SitePage;

TypeError: Cannot read property 'params' of undefined (React/TypeScript)

1 Answers