fj785 fj785 - 4 days ago 4
React JSX Question

How do I render a list of items into my React Component from mlab?

I'm trying to render the items inside of {this.state.courses.name} but nothing is showing up. I'm not even getting anything in the terminal for the console.log inside ComponentDidMount(). Is it simply a case that the code is never reaching ComponentDidMount()? I am new to React so it may be a simple mistake...



import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions/';
import Cookies from 'universal-cookie';
import { Link } from 'react-router-dom';
import CourseList from '../CourseList/CourseList.js';
import axios from 'axios';
//import router from '../server/controllers/course.controller.js'
const cookies = new Cookies();

class DashboardPage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
courses: {},
};
console.log(props);
}

componentDidMount() {
axios.get("localhost:3001/courses")
.then(function(response) {
this.setState({
courses: response.data.courses
})
console.log('I am getting the response from axios courses here!',response.data)
})
}
render() {
let inst = cookies.get('instructor');
console.log('ins', inst);
inst = inst.fullName;
//CourseController.getAllCourses((req,res) => {
//console.log(res.data)
//})
return (
<div>
<div className="greeting"> Welcome Back, {this.props.fullName}</div>
<div className="addCourseLink">
<Link to="/addCourse">Add a new course </Link>
</div>
<div className="dashboard-your-courses"><h2>Your Courses</h2></div>
<div className="courseList">{this.state.courses.name}</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
fullName: state.auth.fullName
};
}

export default connect(mapStateToProps, actions)(DashboardPage);




Answer

Given that the object below is the result of calling GET on localhost:3000/courses

{
     "courses": [{
         "_id": "5949328eafbad560ecdfba5e",
         "name": "Math 300",
         "_creator": "59360ff893dfcb1a24e0e855",
         "__v": 0
     }, {
         "_id": "59493590afbad560ecdfba5f",
         "name": "Math 300",
         "_creator": "59360ff893dfcb1a24e0e855",
         "__v": 0
     }, {
         "_id": "5949374fafbad560ecdfba60",
         "name": "English 300",
         "_creator": "59360ff893dfcb1a24e0e855",
         "__v": 0
     }]
 }

You have to make sure that you are mapping the state courses correctly with the value of courses property in the above object, which is an array. You might want to initialise courses with an array instead. Also, since courses is an array, you probably want to use map as well. In the code below, I have created a component to render the courses.

import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions/';
import Cookies from 'universal-cookie';
import { Link } from 'react-router-dom';
import CourseList from '../CourseList/CourseList.js';
import axios from 'axios';
//import router from '../server/controllers/course.controller.js'
const cookies = new Cookies();

class DashboardPage extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      courses: [],
    };
    console.log(props);
  }

  componentDidMount() {
    axios.get("localhost:3001/courses")
    .then(function(response) {
      this.setState({
        // given that response.data.courses is an object with a couse property
        courses: response.data.courses.courses
      })
      console.log('I am getting the response from axios courses here!',response.data)
    })
  }
  render() {
    let inst = cookies.get('instructor');
    console.log('ins', inst);
    inst = inst.fullName;
    //CourseController.getAllCourses((req,res) => {
    //console.log(res.data)
    //})
    
    // render your functional component here
    return <DashboardContent courses={this.state.courses} fullName={this.props.fullName} />
  }
}

// new functional component
function DashboardContent(props) {
  return (
    <div>
      {
        props.courses.map(course => {
          return <div>
            <div className="greeting"> Welcome Back, {props.fullName}</div>
            <div className="addCourseLink">
              <Link to="/addCourse">Add a new course </Link>
            </div>
            <div className="dashboard-your-courses"><h2>Your Courses</h2></div>
            <div className="courseList">{course.name}</div>
          </div>   
        }) 
      }
    </div>
  );
}

function mapStateToProps(state) {
  return {
    fullName: state.auth.fullName
  };
}

export default connect(mapStateToProps, actions)(DashboardPage);