React Component Not Loading? - node.js

Question

I have made a header.js component in a separate file in React, and I'm trying to bring it into the Profile.js file, but it's not loading in the front-end.
I am not getting any errors.
Output:
Profile.js:
In this file I think it's not able to load the header component as it's only printing the data from the if loop, and in-spite of having data in the else part, it is skipping that.
import React, { Component } from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';
import aboutinfo from './aboutinfo';
import userinfo from './userinfo';
import header from './header';
import {getProfileByName} from '../../actions/userprofileAction';
class Profile extends Component {
componentDidMount() {
if (this.props.match.params.profilename) {
this.props.getProfileByName(this.props.match.params.profilename);
}
}
render() {
const { profile, loading } = this.props.profile;
let profileContent;
if (profile === null || loading) {
profileContent = <h3>loadinggg....</h3>;
} else {
profileContent = (
<div>
<div className="row">
<div className="col-md-6">
<Link to="/userprofile" className="btn btn-light mb-3 float-left">
Back
</Link>
</div>
<div className="col-md-6" />
</div>
<header/>
</div>
);
}
return (
<div className="profile">
<div className="container">
<div className="row">
<div className="col-md-12">{profileContent}</div>
</div>
</div>
</div>
);
}
}
Profile.propTypes = {
getProfileByName: PropTypes.func.isRequired,
profile: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
profile: state.profile
});
export default connect(mapStateToProps, { getProfileByName })(Profile);
header.js:
import React, { Component } from 'react';
import isEmpty from '../../validation/is-empty';
class header extends Component {
render() {
const { profile } = this.props;
return (
<div className="row">
<div className="col-md-12">
<div className="card card-body bg-info text-white mb-3">
<div className="text-center">
<h1 className="display-4 text-center">{profile.user.name}</h1>
<p className="lead text-center">
{profile.status}{' '}
{isEmpty(profile.company) ? null : (
<span>at {profile.company}</span>
)}
</p>
{isEmpty(profile.location) ? null : <p>{profile.location}</p>}
</div>
</div>
</div>
</div>
);
}
}
export default header;
userprofileaction.js:
import axios from 'axios';
import {GET_USERPROFILE,PROFILE_LOADING,GET_ERRORS,CLEAR_CURRENT_PROFILE,GET_PROFILES} from './types';
//getting current profile
export const getProfile=()=>dispatch=>{
//dispatching loading state before req
dispatch(profileLoading());
axios.get('/api/userprofile')
.then(res=>
dispatch({
type:GET_USERPROFILE,
payload:res.data
}))
.catch(err=>
dispatch({
type:GET_USERPROFILE,
payload:{}
}))
}
// Create Profile
export const createProfile = (profileData, history) => dispatch => {
axios
.post('/api/userprofile', profileData)
.then(res => history.push('/dashboard'))
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
export const addExp=(experienceData,history)=>dispatch=>{
axios.post('/api/userprofile/experience',experienceData)
.then(res=>history.push('/dashboard'))
.catch(err=>dispatch({
type:GET_ERRORS,
payload:err.response.data
}))
}
export const deleteExperience = id => dispatch => {
axios
.delete(`/api/userprofile/experience/${id}`)
.then(res =>
dispatch({
type: GET_USERPROFILE,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
//loading the profile
export const profileLoading=()=>{
return{
type:PROFILE_LOADING
}
}
//clearing profile
export const clearcurrentprofile=()=>{
return{
type:CLEAR_CURRENT_PROFILE
}
}
//getting profiles
export const getProfiles = () => dispatch => {
dispatch(profileLoading());
axios
.get('/api/userprofile/all')
.then(res =>
dispatch({
type: GET_PROFILES,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_PROFILES,
payload: null
})
);
};
//getting profile by profile name
export const getProfileByName = profilename => dispatch => {
dispatch(profileLoading());
axios
.get(`/api/profile/handle/${profilename}`)
.then(res =>
dispatch({
type: GET_USERPROFILE,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_USERPROFILE,
payload: null
})
);
};