Having issues passing data from back end to front thru axios, on a secondary model

[tthephas]

Describe the bug A clear and concise description of what the bug is. We cant seem to bring in data from the back end and render on the front. thru our axios call to the back. getting a "null" value error.

What is the problem you are trying to solve? bring in seeded data from the back end db to the front to render on a side page (not the home index page)

Expected behavior A clear and concise description of what you expected to happen. expect to be able to pass data from back to front, thru an axios call, then render on the page (even the console log).

What is the actual behavior? A clear and concise description of what actually happened. getting an error that the browser cannot render undefined "null"

Post any code you think might be relevant (one fenced block per file)

const IndexDepartment = (props) => {
  // State to store the departments data
  const [departments, setDepartments] = useState(null);
  console.log('this is departments', departments)
  console.log('this is props', props)

  // State to store the number of departments to display
  //const [displayCount, setDisplayCount] = useState(8);

  //Use effect to fetch the departments data from the API
  useEffect(() => {
    getAllDepartments() 
      .then(res => setDepartments(res.data.department))
      .catch(err => console.log(err))
}, []); // Second argument of an empty array means this useEffect will only run once on component mount

  const departmentCards =  departments.map(department => (
    <Card key={ department.id }>
        <Card.Header>
            { department.name }
        </Card.Header>

    </Card>
))

  return (
    <div>
      <h1>View Artworks</h1>
      <p>Search by Department</p>
       {departmentCards}

      {/* <ul>
   // Need to somehow display department images with their corresponding names, ex: Asian Art 
        {departments.slice(0, displayCount).map((department) => (
          <li key={department.departmentID}>{department.displayName}</li>
        ))}
      </ul>

      {displayCount < departments.length && (
        <button onClick={handleAllArtworks}>See All Artworks</button>
      )} */}

    </div>
  );
};

What is your best guess as to the source of the problem? either its in the way we are writing the STATE changing code, or something with the rendering and the route it is supposed to go to.

What things have you already tried to solve the problem? we double checked the url. we checked to make sure this teammate has the seeded data. confirmed in postman that the route works. checked STATE code against our class code and examples

Additional context Add any other context about the problem here.

Paste a link to your repository here https://github.com/caitreid/projectThreeFrontend

[asands94]

Instead of .then(res => setDepartments(res.data.department)) do .then(res => console.log(res.data)) and see what you get in the console. Just to make sure you are accessing the object correctly

[tthephas]

tried that, we arent even getting that console log back. its not coming thru even to that point

[asands94]

Can you share the code from the entire file?

[tthephas]

sure. one sec

[tthephas]

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { getAllDepartments } from '../../api/departments'
import Card from 'react-bootstrap/Card'

const IndexDepartment = (props) => {
  // State to store the departments data
  const [departments, setDepartments] = useState(null);
  console.log('this is departments', departments)
  console.log('this is props', props)

  // State to store the number of departments to display
  //const [displayCount, setDisplayCount] = useState(8);

  //Use effect to fetch the departments data from the API
  useEffect(() => {
    getAllDepartments() 
      .then(res => console.log('This is the data', res.data))
      .catch(err => console.log(err))
}, []); // Second argument of an empty array means this useEffect will only run once on component mount

  // Function to handle the "handleAllArtworks" button click
 // const handleAllArtworks = () => {
    // Update displayCount to display all departments
 //   setDisplayCount(departments.length);
 // };

  const departmentCards =  departments.map(department => (
    <Card key={ department.id }>
        <Card.Header>
            { department.name }
        </Card.Header>

    </Card>
))

  return (
    <div>
      <h1>View Artworks</h1>
      <p>Search by Department</p>
       {departmentCards}

      {/* <ul>
   // Need to somehow display department images with their corresponding names, ex: Asian Art 
        {departments.slice(0, displayCount).map((department) => (
          <li key={department.departmentID}>{department.displayName}</li>
        ))}
      </ul>

      {displayCount < departments.length && (
        <button onClick={handleAllArtworks}>See All Artworks</button>
      )} */}

    </div>
  );
};

export default IndexDepartment;

[tthephas]

Solved with ashley's help. The screen was loading before the info had time to make it from back to front. Added an if statement to show "loading..." or loading screen, to cover that split second that the data needed to populate on the front end.