React: Javascript and Mongodb

Question

I’m following a tutorial on how to make an instagram, has been done and tested the backend and frontend separately. In the backend I can change the routes and send/save information to Mongodb, in the frontend I can display the information the way I want. The problem is when I go to pull from the database, I made a scheme for it to go through all the database posts displaying its information, only apparently it is not going through any position. I don’t think the problem is mongodb because I can connect and upfile (but not get them?).

I’m sure the code is as in the video.

import React, {Component} from 'react';
import api from '../services/api';

import './Feed.css';

import more from '../assets/more.png';
import tolike from '../assets/tolike.png';
import nolike from '../assets/nolike.png';
import comment from '../assets/comment.png';
import send from '../assets/send.png';

class Feed extends Component{
  state = {
    feed: [],
  };  

  async componetDidMount() {
      const response = await api.get('posts');

      this.setState({ feed: response.data });  
  }

  render() { 
    return(
      <section id="post-list">
        { this.state.feed.map(post => (
          <article>
            <header>
              <div className="user-info">
                <span>{post.author}</span>
                <span className="place"> {post.place}</span>
              </div>

              <img src={more} alt= "Mais"/>
            </header>

            <img src= {`http://localhost:3333/files/${post.image}`} alt= "post"/>

            <footer>
              <div className= "actions">
                <img src = {nolike} alt=""/>
                <img src = {comment} alt=""/>
                <img src = {send} alt=""/>
              </div>
              <strong>{post.likes}</strong>

              <p>
                {post.description}
                <span> {post.hashtag}</span>
              </p>
            </footer>  

          </article> 
        ))}

      </section >
    );
  }
}

export default Feed;

I’ll leave the project as an attachment, I’m sure it’s easy for anyone who understands it. My studies with web programming are locked because of this Firefoxsend download backend.rar and frontend.rar

Following recommendations I used the console.log(Response.data) but did not get error alerts either in the browser console or in vs code.

     async componetDidMount() {
      const response = await api.get('posts');
      this.setState({ feed: response.data });  
      console.log(response.data);
  }

Answer 1

The problem was a typo.

React has a method called componentDidMount that is accessible to components written in class format. It is invoked immediately after a component is mounted (inserted into the tree). Initializations that require DOM nodes must come here. If you need to load date from a remote endpoint, this is a good place to instantiate your request.

I realized that componetDidMount (as I typed) is a non-existent component of React, that is, it was not doing anything. There was no syntax error, I created a method that did nothing, it was not a reference to the React method. The.log console (replay.data) did not display any information.

The correct is componentDidMount, now the page displays the information I want directly from Mongodb, and in the console.log appears the array in the compliant.

 async componentDidMount() {
      const response = await api.get('posts');
      this.setState({ feed: response.data });  
      console.log(response.data);
  }

The problem was just a typo that wouldn’t allow me to use the React resource. I’m a beginner in web programming and didn’t know how to debug code, something really simple.

No console: Array(8) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ].