Cannot read property 'company' of null - reactjs

Question

console.log(profile); works well and it shows this.
but when I use console.log(profile.company); to get the company name.
it show me the Cannot read property 'company' of null error message.
how to solve this err? Any help is highly appreciated.
here is the code
import React,{Fragment,useEffect}from 'react'
import PropTypes from 'prop-types'
import Loading from "../layout/Loading.js"
import {connect} from "react-redux"
import {getProfileById} from "../../redux/profile/profileAction.js"
import { Link } from 'react-router-dom'
import ProfileTop from "./ProfileTop.js"
import ProfileAbout from "./ProfileAbout.js"
import ProfileExperience from "./ProfileExperience.js"
import ProfileEducation from "./ProfileEducation.js"
import ProfileGithub from "./ProfileGithub.js"
const Profile = ({getProfileById,match,profileData,loginData}) => {
const {loading,profile}=profileData
console.log(profile); //works
console.log(profile.company); //error occurred
useEffect(()=>{
getProfileById(match.params.userId)
},[getProfileById,match.params.userId])
return (
<div style={{marginTop:"100px"}}>
{
profile ===null||loading? (<Loading/>):
(<Fragment>
<Link to="/profiles" className="btn btn-light"> Back to profiles</Link>
{
(loginData.isAuthenticated && loginData.loading===false&&loginData.user_data.userid===match.params.userId) ?
(<Link to="/edit-profile" className="btn btn-dark">Edit profile</Link>):null
}
<div className="profile-grid my-1">
<ProfileTop profile={profile}></ProfileTop>
<ProfileAbout profile={profile}></ProfileAbout>
<ProfileExperience profile={profile}></ProfileExperience>
<ProfileEducation profile={profile}></ProfileEducation>
<ProfileGithub profile={profile}></ProfileGithub>
{
profile.github_user_name===""? null:<ProfileGithub profile={profile}></ProfileGithub>
}
</div>
</Fragment>)
}
</div>
)
}
Profile.propTypes = {
profileData:PropTypes.object.isRequired,
}
const mapStateToProps=(state)=>{
return{
profileData:state.profileData,
loginData:state.loginData
}
}
export default connect(mapStateToProps,{getProfileById})(Profile)

Answer 1

Cannot read property 'company' of null error message
It is clear that the 'company' object is null (might be for the initial render)
and you are getting the error because you are accessing the property on the null object.
In the case of TypeScript you can use,
profile?.company.
It is called optional chaining
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining
but in the normal JS, we have to use if statement and check for null case.
For the above example your template is completely depends on the profile.
So that initially itself check the value of profile, if the value is undefined/null then return an empty template.
if(!profile){
return null;
}
return <Your template>

Answer 2

As mentioned in the comments, browser consoles will not print the content of an object right away. To do so you would need to do something such as JSON.stringify(profile).
Also, it's perfectly fine to console.log on functional components in my opinion, this will let you know when components render (but don't get too caught up in why components render so often, renders are usually not expensive).
If you are using a recent version of Create React App, you can try optional chaining (?.):
console.log(profile);
console.log(profile?.company); // equivalent to (profile && profile.company)
// Or if you need to know the content exactly in the moment:
console.log(JSON.stringify(profile));