Taking Axios.get() data and displaying it in React component

Question

I am having trouble displaying data via a React component in a table.

Goal: Displaying MongoDB data in a React component, and learning why this data process isn't working.

What's going wrong here? I know it's not the HTTP request, so the data format seems to be the issue.

For reference:

HTTP request

app.get('/api/people/fetchall', requireLogin, async (req, res) => {

  const userContacts = await User.findOne({_id: req.user._id}, 'contacts');
  res.send(userContacts['contacts']);
  console.log(userContacts['contacts']);
 });

Contacts HTTP POST

app.post('/api/people/add', requireLogin, async (req, res) => {
    console.log(req.body.name);
    const { name, company, linkedin, department, email } = req.body;
    const newcontact = new AddContact({
      _user: req.user.id,
      name: name,
      company: company,
      linkedin: linkedin,
      department: department,
      email: email,
     dateUpdated: Date.now()
   });
   User.findByIdAndUpdate(
       {_id: req.user._id},
       {$push: {contacts: newcontact}},
       {safe: true, upsert: true},
       function(err, model) {
           console.log(err);
       }
   );
//Our user to add Contact to, and find the contacts array
   const user = await req.user.save();
 });

React component, along with loading data within the component

import React, {Component} from 'react';
import MaterialTable from 'material-table';
import axios from 'axios';

const fakedata = [{'name': 'Elliot Kang','company': 'Employableh','linkedin': 'linkedin.com/en/elliotkang7',
'department': 'PM','email': 'elliot@employableh.com'}, {'name': 'Elliot Kon','company': 'Employableh','linkedin': 'linkedin.com/en/elliotkang7',
'department': 'PM','email': 'elliot@employableh.com'}];

class ContactDisplay extends Component {

  constructor() {
    super();
    this.state= {contacts: {},
      columns: [
        {title: 'Name', field: 'name'},
        {title: 'Company', field: 'company'},
        {title: 'Linkedin', field: 'linkedin'},
        {title: 'Department', field: 'department'},
        {title: 'Email', field: 'email'}
      ],

  }
}

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  componentDidMount() {
    axios.get('/api/people/fetchall').then(res => {
      console.log(res.data);
      this.setState({contacts: res.data});
    });
  }


  render() {
    return(
      <MaterialTable
      title='Contacts'
      columns = {this.state.columns}
      data = {fakedata}
      />
    );


  }
}

export default ContactDisplay;

Answer 1

I think the problem might be you forgot to change

data = { fakedata }

to

data = { this.state.contacts }

in the render method.

Answer 2

So there are two things you need to do...

1. Change the res.send(userContacts['contacts']) to res.json(userContacts['contacts']) because.send is for text not json.
2. So you are passing fakedata in component instead you should pass this.state.contacts and pass fakedata when initiazing state so instead of contacts: {} do contacts: fakedata