Cannot receive props from Link

Question

I'm learning react and am trying to pass a prop(named as classId) to another component(ClassPage.js) through Link, however I cannot receive the prop and it is returning undefined. Thanks for your time, appreciate that.

App.js - i want to access classId(from the link in ClassList) in my ClassPage component )

<Route path="/classpage/:classId" exact render={() => <ClassPage isLoggedIn={this.state.isLoggedIn} user={this.state.user}/>} />

ClassList.js - try to pass data to ClassPage component through Link

import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./ClassList.css";

class ClassList extends Component {

render() {

console.log(this.props.classId); //recived
console.log(this.props.classTitle); //recived
console.log(this.props.classDescription); //recived
console.log("click link and direct to Class Page");


// Problem located in here, try to pass data to ClassPage.js
return (
    <div>
    <Link to={"/classpage/"+this.props.classId}> 

      <h3 className="titleStyle">{this.props.classTitle}</h3> 

    </Link>
        <div className="row">
      <div className="col-sm-6 text-secondary">
        Instructor: {this.props.instructor}
      </div>
      <div className="col-sm-6 text-secondary">
        Meeting day: {this.props.meetingDay}
      </div>
    </div>
    </div>
);
}
}

export default ClassList;

ClassPage.js - unable receiving classId from ClassList component

import React from 'react';
import Navbar from "../Components/Navbar.js";
import Footer from "../Components/Footer.js";
import PostTable from "../Components/PostTable.js";


class ClassPage extends React.Component {
  constructor(props) {
    super(props);

    console.log("class ID");
    console.log(this.props.classId); //Problem located in here
    //cannot receive - this.props.classId

    this.state  = {
      classPostsData: []
    };
  }

componentDidMount() {
    fetch("https://api.myjson.com/bins/jfuqc") 
    // fetch from localhost by this.props.classId
        .then(data => data.json())
        .then(data => this.setState({classPostsData: data}))
  }

render() {
    return(
      <div>
        <Navbar isLoggedIn={this.props.isLoggedIn} />

        <h1>{this.props.classTitle}</h1> 
        <p>{this.props.classDescription}</p>
        {this.state.classPostsData.map(post => {
          return (
            <PostTable
              key={post.post_ID}
              post_ID={post.post_ID}
              post_Title={post.post_Title}
              post_note={post.post_note}
            />
          );
        })}
        <Footer isLoggedIn={this.props.isLoggedIn} />
      </div>
    );
  }
}

export default ClassPage;

Updated:

ClassList.js

const toClassPage = {
   pathname: "/classpage/" + this.props.classId,
   state: {
            classId: this.props.classId,
            classTitle: this.props.classTitle,
            classDescription: this.props.classDescription 
          }
}

<Link to={toClassPage}>
      <h3 className="titleStyle">{this.props.classTitle}</h3> 
</Link>

ClassPage.js

constructor(props) {
    super(props);

    console.log("class ID/Title/Description");
    console.log(this.props.location.state.classId);
    console.log(this.props.location.state.classTitle);
    console.log(this.props.location.state.classDescription);

    this.state  = {
        classPostsData: []
    };
}

Error from Chrome:

TypeError: Cannot read property 'state' of undefined
new ClassPage
src/Pages/ClassPage.js:13

   10 | super(props);
   11 | 
   12 | console.log("class ID/Title/Description");
 > 13 | console.log(this.props.location.state.classId);
      | ^  14 | console.log(this.props.location.state.classTitle);
   15 | console.log(this.props.location.state.classDescription);
   16 |

Hi @kamzy, Please add exactly where in your code you are using the console.log. Try using this.props. From the limited information we do not know your code setup so it hard to troubleshoot where the issue could be. Full file pages is preferred so we can see the full picture. — Roger Perez, Apr 19 '19 at 23:23
@RogerPerez I have edited my question. Hopefully it provides better understanding. Thanks — Kamzy, Apr 19 '19 at 23:48

Brandon Alexander · Answer 1 · 2019-04-20T00:05:04.223

0

You shouldn't need to access class id according to your route. You can just rip it out of the href.

let id = window.location.href.split("/")[window.location.href.split("/").length -1];

If you only need that id from the address bar the code above should do the trick.

If you need more than just the class id you can also pass props to the state through link.

   <Link to={{
      pathname: `/classpage/${this.props.classId}`,
      state: {
        classId: this.props.classId,
        title: this.props.classTitle,
        description: this.props.classDescription 
      }
    }}>
<h3 className="titleStyle">{this.props.classTitle}</h3> 
</Link>

You would then access that through this.props.location.state

edited Apr 20 '19 at 00:05

answered Apr 19 '19 at 23:57

Brandon Alexander

1
2

Thanks for your comment. I got your idea but actually i would also like to pass the classTitle & classDescription from ClassList to ClassPage through the Link, so i can use them in the
under the render in ClassPage
– Kamzy Apr 20 '19 at 00:02
I added to my response hopefully it helps – Brandon Alexander Apr 20 '19 at 00:07
Thank for your response, however when i try to access through this.props.location.state, my browser gives me an error. I have updated my question with new code and show the error of chrome. Im so frustrated, have been stuck for hours already – Kamzy Apr 20 '19 at 00:38

score 0 · Answer 2 · answered Apr 20 '19 at 08:48

0

I followed this example and finally it works well. Thanks for the help

Cannot read property ‘params’ of undefined (React Router 4)

answered Apr 20 '19 at 08:48

Kamzy

11
2

Cannot receive props from Link

2 Answers2

under the render in ClassPage