Nested React Components Not Showing in GitHub Pages

Question

I'm creating a single page website and publishing it through GitHub Pages, but the content from the nested components (About and Skills) doesn't show. I can't figure out what I'm missing. The only information that currently shows includes the NavBar, h2 headings (from ProfileContainer), and Footer. The entire body within each nested component (About, Skills) that lives in my PortfolioContainer is not showing at all. This is what I have:

App.js:

import { useEffect, useState } from 'react';
import NavBar from './components/NavBar';
import ProfileContainer from './components/ProfileContainer';
import Footer from './components/Footer';

function App() {
  const ABOUTURL = "http://localhost:3000/about"; 
  const [aboutData, setAboutData] = useState([]);
  useEffect (()=>{
    fetch(ABOUTURL)
    .then(r=>r.json())
    .then((data) => {
      setAboutData(data)
    })
  }, [])

  const SKILLURL ="http://localhost:3000/skills";
  const [skillsData, setSkillsData] = useState([]);
  useEffect (()=> {
    fetch(SKILLURL)
    .then(r=>r.json())
    .then((fetchedSkillsData) => {
      setSkillsData(fetchedSkillsData)
    })
  }, [])

return (
    <div>
      <NavBar/>
      <ProfileContainer data={aboutData} fetchedSkillsData {skillsData}/>
      <Footer/>
    </div>
  );
}
export default App;

PortfolioContainer.js:

import React from 'react';
import About from './About';
import Skills from './Skills';

function ProfileList ({data, fetchedSkillsData}) {

  return (
    <div class="cards">
        <h2 class="heading-title" id="skills"> About</h2>
            {data.map(
                (eachSec)=>(
                    <About key={eachSec.id} dataObj={eachSec}/>
                )
            )}
    
        <h2 class="heading-title" id="skills"> Skills</h2>
        <div class="brand-box">
            {fetchedSkillsData.map(
                (eachSkill)=>(
                    <Skills key={eachSkill.id} skillDataObj={eachSkill}/>
                )
            )}
        </div>

About.js

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub, faLinkedin, faMedium } from '@fortawesome/free-brands-svg-icons';

function About ({dataObj}){ 
  return (
    <div id="about">
        <div class = "brand-box">
        <h1 class="heading-title">Hi, I'm {dataObj.username}. <br/>I'm a {dataObj.title</h1>    
            <p class="about_body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <a href={dataObj.resumeurl}>
                <button class="resume-btn"> résume </button></a>
            <a href={dataObj.linkedin} aria-label="linked-in" >
                <FontAwesomeIcon icon={faLinkedin} size='lg'/></a>
            <a href={dataObj.github} aria-label="github source code">
                <FontAwesomeIcon icon={faGithub } size='lg'/></a>
            <a href={dataObj.medium} aria-label="blog">
                <FontAwesomeIcon icon={faMedium } size='lg'/></a>    
        </div>
    </div>   
  )
}
export default About;

Skills.js:

import React from 'react'

function Skills ({skillDataObj}) {
  return (
        
    <div class="heading-wrapper">
        <section> 
            <ul class="skills-list">
                <li class="skills-list-btn">{skillDataObj.name}</li>
            </ul>
        </section> 
    </div>
  )
}
export default Skills;

Answer 1

From a quick read, I noticed that you create the component ProfileContainer as

<ProfileContainer data={aboutData} fetchedSkillsData {skillsData}/>

which means you missed a '='. I think this causes an error. Try doing

<ProfileContainer data={aboutData} fetchedSkillsData={skillsData}/>

Other than that, fix the links in your code. They all point to localhost which is not something you want on a deployed application.