title: TypeError: Cannot read property 'name"' of undefined in react when passing object in useState
body: <p>My issue is from route getting the response in json format. And when consoling it gives the data as well but when i passing in setProfileData(data) then updated state gives undefined.</p>
  <p>But when i gives like setProfileData(data.user.name) then its gives that specific value.</p>
  <p>Here my server route</p>
  <pre><code>router.get('/user/:id',async(req,res)=&gt;{
    try {
      const user = await User.findOne({_id:req.params.id}).select('-password')
      const post = await Post.find({postedBy:req.params.id}).populate('postedBy', '_id name')
      
      return res.json({user,post})
          
      } catch (error) {
          return res.json(error)
      }
  })
  </code></pre>
  <p>Here is my Component UserProfile</p>
  <pre><code>import React,{useContext,useEffect,useState} from 'react';
  import {useHistory,useParams} from 'react-router-dom'
  import {UserContext} from '../../App'
  
  const UserProfile = ()=&gt;{
      const [newProfile,setProfileData] = useState(null)
      const {state,dispatch} = useContext(UserContext)
      
      const {userId} = useParams()
      console.log(userId)
      useEffect(()=&gt;{
          fetch(`/user/${userId}`,{
              headers:{
                  'Authorization': 'Bearer '+localStorage.getItem('jwt')
              }
          }).then((res)=&gt;{
              return res.json()
          }).then((data)=&gt;{
              console.log(data)
             setProfileData(data)
              
          })
      },[])
      return (
          &lt;div style={{width:'555px',margin:&quot;0px auto&quot;}}&gt;
              &lt;div style={{display:&quot;flex&quot;,justifyContent:&quot;space-around&quot;,margin:'18px 0px',borderBottom:&quot;1px solid grey&quot;}}&gt;
                  &lt;div&gt;&lt;img style={{width:&quot;160px&quot;,height:&quot;160px&quot;,borderRadius:&quot;80px&quot;}}
                  src=&quot;https://images.unsplash.com/photo-1550927407-50e2bd128b81?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60&quot; alt=&quot;Profile Pic&quot;/&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
      &lt;h4&gt;{newProfile.user.name}&lt;/h4&gt;
                   &lt;div style={{display:&quot;flex&quot;,justifyContent:&quot;space-around&quot;,width:&quot;108%&quot;}}&gt;
                       &lt;h5&gt;40 Posts&lt;/h5&gt;
                       &lt;h5&gt;40 Followers&lt;/h5&gt;
                       &lt;h5&gt;40 Followings&lt;/h5&gt;
                   &lt;/div&gt;
                   &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;gallery&quot;&gt;
                   {
                      // userProfile.map((item)=&gt;{
                      //     return (
                      //         &lt;img key={item._id} className=&quot;item&quot; src={item.file} alt={item.title}/&gt;
                      //     )
                      // })
                  }
                  
             
                 
               
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default UserProfile;
  </code></pre>
  <p>{newProfile.user.name} giving type undefined</p>