CODEWITHSUNDEEP
reactjsreact-router
Brett Hays
Brett Hays

Reputation: 23

React Component Does Not Mount

I am in need of some help. I'm working on a create-react-app using React-Router. The issue that I'm seeing is that when I run my app, I should be able to see individual student information when I click on their name. Instead, nothing renders.

Here is the code for the component (students.js) that is not rendering:

import React, { Component } from 'react';
import axios from 'axios';

export default class Student extends Component {
constructor() {
  super();
  this.state = {
    studentInfo: {}
  }

}

componentDidMount(){
  console.log('fired')
  axios.get(`http://localhost:3005/students/${this.props.match.params.id}`)
  .then(res => {
    this.setState({studentInfo: res.data})
  })
  .catch(err => console.log(err))
}

render() {
  return (
    <div className="box">
      <h1>Student:</h1>
      <h1>{this.state.studentInfo.first_name}           
{this.state.studentInfo.last_name}</h1>
      <h3>Grade: {this.state.studentInfo.grade}</h3>
      <h3>Email: {this.state.studentInfo.email}</h3>
    </div>
  )
}
}

I have tried a console.log in the componentDidMount method of my students.js file to see if it is mounting properly and I found that it would not fire. When I tried to check state with the React Dev Tools, I saw that there was no state.

I have a similar component called classList.js that has a similar setup that is working properly.

classList.js:

import React, { Component } from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';

export default class ClassList extends Component {
  constructor() {
  super();
  this.state = {
    students: []
}

}
componentDidMount(){
  axios.get(`http://localhost:3005/students?
  class=${this.props.match.params.class}`)
  .then(res => {
  this.setState({students: res.data});
  })
  .catch(err => console.log(err))}


render() {
const students = this.state.students.map((student,i) =>
  <Link key={i} to={`/student/${student.id}`}><h3>{student.first_name} 
{student.last_name}</h3></Link>
)
return (
  <div className="box">
    <h1>{this.props.match.params.class}</h1>
    <h2>ClassList:</h2>
    {students}
  </div>
)
}

}

I've checked my routes and my link tags and they seem fine.

Routes.js:

import React from 'react';
import {Switch, Route} from 'react-router-dom';
import Home from './components/Home/Home';
import About from './components/About/About';
import ClassList from './components/ClassList/ClassList';
import Student from './components/Student/Student'

export default (
  <Switch>
    <Route exact path='/' component={Home} />
    <Route path='/about' component={About} />
    <Route path='/classlist/:class' component={ClassList} />
    <Route path='student/:id' component={Student} />
  </Switch>
)

Any thoughts? Thanks!

Upvotes: 2

Views: 6667

Answers (1)

Jo&#227;o Cunha
Jo&#227;o Cunha

Reputation: 10297

I'm pretty sure it doesn't find the student route because you're missing an /

<Route path='student/:id' component={Student} />

should be

<Route path='/student/:id' component={Student} />

Upvotes: 1

Related Questions