TypeError: Cannot read property 'params' of undefined in React

Question

I am new to react and I try to pass Id from a component to another component. To do that I used

<a className="btn btn-view" href={`/buyer/viewpostdetails/${posts._id}`}>View Post <i className="fas fa-angle-double-right"></i></a>

this code. It works correctly and shows the URL correctly with the ID.

Then I tried to get that Id

    componentDidMount(){
            const id = this.props.match.params.id;

            axios.get(`/post/${id}`).then((res) => {
                if (res.data.success) {
                    this.setState({
                        post:res.data.post
                    });
                    console.log(this.state.post);
                }
            });
    }

I used the above code to do that but I got an error

TypeError: Cannot read property 'params' of undefined

How do I solve this issue?

Is that a simple link? What do you think this.props.match.params.id is? Are you using react-router? — Zsolt Meszaros
– Zsolt Meszaros, Commented Aug 1, 2021 at 19:30
@ZsoltMeszaros this is the URL that I got "localhost:3000/buyer/viewpostdetails/60f7d7fbd89c5a1470919a24". I want to get this id into the above id variable. That's why I used this "this.props.match.params.id". — Harshana Walpita
– Harshana Walpita, Commented Aug 1, 2021 at 19:36
@yochanansheinberger this is the code that I used to do this constructor(props){ super(props); this.state={ post:{} }; } componentDidMount(){ const id = this.props.match.params.id; axios.get(/post/${id}).then((res) => { if (res.data.success) { this.setState({ post:res.data.post }); console.log(this.state.post); } }); } — Harshana Walpita
– Harshana Walpita, Commented Aug 1, 2021 at 19:53

ibrahimAKIN · Accepted Answer · 2021-08-01 20:25:04Z

1

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { useEffect, useState } from "react";
// import axios from "axios";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" component={FirstPage} exact />
          <Route path="/:id" component={SecondPage} />
        </Switch>
      </Router>
    </div>
  );
}
function FirstPage() {
  const [post, setPost] = useState({ _id: 5 });
  return (
    <div>
      <div>First Page</div>
      <Link to={`/${post._id}`}>Link</Link>
    </div>
  );
}

function SecondPage(props) {
  const [state, setState] = useState();
  useEffect(() => {
    const id = props.match.params.id;
    setState(id);
    // axios.get(`/post/${id}`).then((res) => {
    //   if (res.data.success) {
    //     setState(res.data.post);
    //   }
    // });
  }, []);
  return <div>SecondPage id: {state}</div>;
}

You must do something like that.
First you define a router.
Then you can access the id from the relevant page or component.
And I suggest you to define components as functions and use useEffect and useState hooks.

answered Aug 1, 2021 at 20:25

ibrahimAKIN

386 bronze badges

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

1 Comment

Harshana Walpita Over a year ago

Thanks so much, @ibrahimAKIN. I appreciate your help!

Collectives™ on Stack Overflow

TypeError: Cannot read property 'params' of undefined in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related