title: TypeError: Cannot read property 'name' of null in react
body: <p>I am new to react and redux so I am not able to solve this bug easily after doing plenty of research.
  I am trying to display profiles of users in a separate page in form of cards but I am getting an error:</p>
  
  <pre><code>TypeError: Cannot read property 'name' of null
  ProfileItem.render
  src/components/profiles/Profileitem.js:15
    12 | &lt;div className="row"&gt;
    13 |   
    14 |   &lt;div className="col-lg-6 col-md-4 col-8"&gt;
  &gt; 15 |     &lt;h3&gt;{profile.user.name}&lt;/h3&gt;
    16 |     &lt;p&gt;
    17 |       {profile.status}{' '}
    18 |       {isEmpty(profile.company) ? null : (
  
  ▶ 22 stack frames were collapsed.
  (anonymous function)
  src/actions/userprofileAction.js:77
    74 | dispatch(profileLoading());
    75 | axios
    76 |   .get('/api/userprofile/all')
  &gt; 77 |   .then(res =&gt;
    78 |     dispatch({
    79 |       type: GET_PROFILES,
    80 |       payload: res.data
  </code></pre>
  
  <p>//this is the back-end of the userprofile 
  userprofile.js</p>
  
  <pre><code>const express = require('express');
  const router = express.Router();
  const mongoose=require('mongoose');
  const passport=require('passport');
  
  //loading validation after creating the userprofie valdiation
  const validateProfileInput=require('../../validation/userprofile');
  const validateExperienceInput=require('../../validation/experience');
  //bring profile schema model
  
  const Profile=require('../../models/Profile');
  
  //bringing user schema model
  const User=require('../../models/User');
  
  //testing this api 
  router.get('/demo', (req, res) =&gt; res.json({ msg: 'Profile Works' }));
  //get request
  //now need to check for the user who is trying to login
  router.get('/',passport.authenticate('jwt', { session: false }),(req, res) =&gt; {
      //initializing this as empty because need to add error msg   
      const errors = {};
  //fetch current user's profile and finding from profile model
  //findone is a mongoose method which will find a specifc{single} thing
          Profile.findOne({ user: req.user.id }) .populate('user', ['name']).then(profile =&gt; {
             //if not found display error msg
              if (!profile) {
                errors.noprofile = 'no profile exists for this person';
                return res.status(404).json(errors);
              }
              //if found then show proifle
              res.json(profile);
            })
            .catch(err =&gt; res.status(404).json(err));
        }
      )
  //to see all profiles at api/userprofile/all
      router.get('/all',(req,res)=&gt;{
          Profile.find()
          .populate('user',['name'])
          .then(profiles=&gt;{
              if(!profiles){
                  errors.noprofile='no profiles';
                  return res.status(404).json(errors);
              }
              res.json(profiles);
          })
          .catch(err=&gt;res.status(404).json({profile:'no profiles'}));
      })
  //getting profile by name
      router.get('/profilename/:profilename',(req,res)=&gt;{
          Profile.findOne({profiename:req.params.profiename})
          .populate('user',['name'])
          .then(profile=&gt;{
              if(!profile){
                  errors.noprofile='there is no profile';
                  res.status(400).json(errors);
              }
              res.json(profile);
          })
          .catch(err=&gt;res.status(404).json(err));
      })
  //getting profile by id
      router.get('/users/:users_id',(req,res)=&gt;{
          Profile.findOne({profiename:req.params.profiename})
          .populate('user',['name'])
          .then(profile=&gt;{
              if(!profile){
                  errors.noprofile='there is no profile';
                  res.status(400).json(errors);
              }
              res.json(profile);
          })
          .catch(err=&gt;res.status(404).json(err));
      })
  //post request
      router.post(
          '/',
          passport.authenticate('jwt', { session: false }),
          (req, res) =&gt; {
          const {errors,isValid}=validateProfileInput(req.body);
  
          //check validation
          if(!isValid){
              return res.status(400).json(errors);
          }
          //getting fields and adding in an obj
          const fields={};
          fields.user=req.user.id;
  
          //checking if its sent from handle
          if(req.body.profilename)fields.profilename=req.body.profilename;
          if(req.body.company)fields.company=req.body.company;
          if(req.body.location)fields.location=req.body.location;
  
          //so splitting skills into an array when seperated by ','
          if(typeof req.body.skills!=='undefined')
              fields.skills=req.body.skills.split(',');
  
  //searching by id and if profile has then update
  
          Profile.findOne({user:req.user.id}).then(profile=&gt;{
              if(profile){
                  Profile.findOneAndUpdate({user:req.user.id},{$set:fields},{new:true})
                  .then(profile=&gt;res.json(profile));
              }
              else{
                  //checking if there
                  Profile.findOne({profiename:fields.profilename}).then(profile=&gt;{
                      if(profile){
                          errors.profiename='profile already there'
                          res.status(400).json(errors);
                      }
                      //saving  and making new if not
                      new Profile(fields).save().then(profile=&gt;res.json(profile));
                  })
              }
          })
            }
          );
  
  //post req to add exp
  router.post(
      '/experience',
      passport.authenticate('jwt', { session: false }),
      (req, res) =&gt; {
        const { errors, isValid } = validateExperienceInput(req.body);
  
        // Check Validation
        if (!isValid) {
          // Return any errors with 400 status
          return res.status(400).json(errors);
        }
    //to add new experience
        Profile.findOne({ user: req.user.id }).then(profile =&gt; {
          const newExperience = {
            title: req.body.title,
            company: req.body.company,
            location: req.body.location,
            from: req.body.from,
            to: req.body.to,
  
            description: req.body.description
          };
  
          // Add to exp array
          profile.experience.unshift(newExperience);
  
          profile.save().then(profile =&gt; res.json(profile));
        });
      }
    );
  
    //after adding if user wants to delete the experience
    router.delete(
      '/experience/:exp_id',
      passport.authenticate('jwt', { session: false }),
      (req, res) =&gt; {
        const { errors, isValid } = validateExperienceInput(req.body);
  
        // Check Validation
        if (!isValid) {
          // Return any errors with 400 status
          return res.status(400).json(errors);
        }
  
        Profile.findOne({ user: req.user.id }).then(profile =&gt; {
          const remove=profile.experience
          .map(item=&gt;item.id)
          .indexof(req.params.exp_id);
          //splicing out of array at index 1
          profile.experience.splice(remove,1)
  
          //saving
          profile.save().then(profile=&gt;res.json(profile));
        })
        .catch(err=&gt;res.status(404).json(err));
      }
    );
  
  
  module.exports = router;
  </code></pre>
  
  <p>userprofileaction.js</p>
  
  <pre><code>import axios from 'axios';
  import {GET_USERPROFILE,PROFILE_LOADING,GET_ERRORS,CLEAR_CURRENT_PROFILE,GET_PROFILES} from './types';
  
  //getting current profile
  export const getProfile=()=&gt;dispatch=&gt;{
      //dispatching loading state before req
      dispatch(profileLoading());
      axios.get('/api/userprofile')
      .then(res=&gt;
      dispatch({
          type:GET_USERPROFILE,
          payload:res.data
      }))
      .catch(err=&gt;
      dispatch({
          type:GET_USERPROFILE,
          payload:{}
      }))
  }
  
  
   // Create Profile
  export const createProfile = (profileData, history) =&gt; dispatch =&gt; {
      axios
        .post('/api/userprofile', profileData)
        .then(res =&gt; history.push('/dashboard'))
        .catch(err =&gt;
          dispatch({
            type: GET_ERRORS,
            payload: err.response.data
          })
        );
    };
    export const addExp=(experienceData,history)=&gt;dispatch=&gt;{
        axios.post('/api/userprofile/experience',experienceData)
        .then(res=&gt;history.push('/dashboard'))
        .catch(err=&gt;dispatch({
            type:GET_ERRORS,
            payload:err.response.data
        }))
    }
  
    export const deleteExperience = id =&gt; dispatch =&gt; {
      axios
        .delete(`/api/userprofile/experience/${id}`)
        .then(res =&gt;
          dispatch({
            type: GET_USERPROFILE,
            payload: res.data
          })
        )
        .catch(err =&gt;
          dispatch({
            type: GET_ERRORS,
            payload: err.response.data
          })
        );
    };
  //loading the profile
  export const profileLoading=()=&gt;{
      return{
          type:PROFILE_LOADING
      }
  }
  //clearing profile
  export const clearcurrentprofile=()=&gt;{
      return{
          type:CLEAR_CURRENT_PROFILE
      }
  }
  
  //getting profiles
  export const getProfiles = () =&gt; dispatch =&gt; {
      dispatch(profileLoading());
      axios
        .get('/api/userprofile/all')
        .then(res =&gt;
          dispatch({
            type: GET_PROFILES,
            payload: res.data
          })
        )
        .catch(err =&gt;
          dispatch({
            type: GET_PROFILES,
            payload: null
          })
        );
    };
  </code></pre>
  
  <p>profileItem.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { Link } from 'react-router-dom';
  import isEmpty from '../../validation/is-empty';
  
  class ProfileItem extends Component {
    render() {
      const { profile } = this.props;
  
      return (
        &lt;div className="card card-body bg-light mb-3"&gt;
          &lt;div className="row"&gt;
  
            &lt;div className="col-lg-6 col-md-4 col-8"&gt;
              &lt;h3&gt;{profile.user.name}&lt;/h3&gt;
              &lt;p&gt;
                {profile.status}{' '}
                {isEmpty(profile.company) ? null : (
                  &lt;span&gt;at {profile.company}&lt;/span&gt;
                )}
              &lt;/p&gt;
              &lt;p&gt;
                {isEmpty(profile.location) ? null : (
                  &lt;span&gt;{profile.location}&lt;/span&gt;
                )}
              &lt;/p&gt;
              &lt;Link to={`/userprofile/${profile.profilename}`} className="btn btn-info"&gt;
                View Profile
              &lt;/Link&gt;
            &lt;/div&gt;
            &lt;div className="col-md-4 d-none d-md-block"&gt;
              &lt;h4&gt;Skill Set&lt;/h4&gt;
              &lt;ul className="list-group"&gt;
                {profile.skills.slice(0, 4).map((skill, index) =&gt; (
                  &lt;li key={index} className="list-group-item"&gt;
                    &lt;i className="fa fa-check pr-1" /&gt;
                    {skill}
                  &lt;/li&gt;
                ))}
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ProfileItem.propTypes = {
    profile: PropTypes.object.isRequired
  };
  
  export default ProfileItem;
  </code></pre>
  
  <p>Profiles.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  
  
  import ProfileItem from './ProfileItem';
  import { getProfiles } from '../../actions/userprofileAction';
  
  class Profiles extends Component {
    componentDidMount() {
      this.props.getProfiles();
    }
  
    render() {
      const { profiles, loading } = this.props.profile;
      let profileItems;
  
      if (profiles === null || loading) {
        profileItems = &lt;h3&gt;Profiles are loading..........&lt;/h3&gt;;
      } else {
        if (profiles.length &gt; 0) {
  
          profileItems = profiles.map(profile =&gt; (
            &lt;ProfileItem key={profile._id} profile={profile} /&gt;
          ));
        } else {
          profileItems = &lt;h4&gt;No profiles found.....&lt;/h4&gt;;
        }
      }
  
      return (
        &lt;div className="profiles"&gt;
          &lt;div className="container"&gt;
            &lt;div className="row"&gt;
              &lt;div className="col-md-12"&gt;
                &lt;h1 className="display-4 text-center"&gt;Job Seeker's profiles&lt;/h1&gt;
                &lt;p className="lead text-center"&gt;
                  Explore and get in touch with a Job seeker for free!
                &lt;/p&gt;
                {profileItems}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  Profiles.propTypes = {
    getProfiles: PropTypes.func.isRequired,
    profile: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    profile: state.profile
  });
  
  export default connect(mapStateToProps, { getProfiles })(Profiles);
  </code></pre>
  
  <p>userprofileReducer.js</p>
  
  <pre><code>import {GET_USERPROFILE,PROFILE_LOADING,CLEAR_CURRENT_PROFILE,GET_PROFILES} from '../actions/types';
  //import { stat } from 'fs';
  const initialstate={
      //will have profile
      profile:null,
      profiles:null,
      loading:false
  }
  
  export default function(state=initialstate, action){
      switch(action.type){
          case PROFILE_LOADING:
          return{
              ...state,
              loading:true
          }
          case GET_USERPROFILE:
          return{
              ...state,
              profile:action.payload,
              loading:false
          }
          case GET_PROFILES:
          return{
              ...state,
              profiles:action.payload,
              loading:false
          }
          case CLEAR_CURRENT_PROFILE:
          return{
              ...state,
              profile:null
          }
          default:
          return state;
  
      }
  }
  </code></pre>