Use state from useContext component and access it from other component. It’s fetching ok, but in the child component it gives an error

I want the state ‘user’ in the component ‘Home’ as below: The console.log is working fine and is not undefined. But the ‘map’ loop gives me an error “TypeError: Cannot read property ‘map’ of undefined”

import {UserContext, UserProvider} from './context/UserContext'

const Home = () => {

  const [user, setUser] = useContext(UserContext)

  console.log(user)

  return(
    <div className="css-home">
      <div className="css-home-div-find">
        <input className="css-home-find" placeholder="Typo here to find someone" type="text"/>
      </div>
      <div className="css-overflow css-home-friends">
        {
          user.friends.map(friend => (
            <FriendsSummary/>
          ))
        }           
      </div>
    </div>
  )
}

In the console.log(user), i have it:

{
"user": [
{
"_id": "6045352a4eb4f70ff41b0f73",
"date": "2021-03-07T20:18:45.893Z",
"name": "Shrek",
"email": "[email protected]",
"hate": "Corn",
"friends": [
       {
         "_id": "6045352a4eb4f70ff41b0f74",
         "name": "Donada",
         "hate": "skol",
         "voted": false,
         "votes": {
            "heart": 10,
            "heartbroken": 2,
            "fire": 130,
            "horse": 12,
            "eye": 12412
          }
       },
       {
         "_id": "6045352a4eb4f70ff41b0f75",
         "name": "Otto",
         "hate": "it",
         "voted": false,
         "votes": {
            "heart": 1,
            "heartbroken": 2,
            "fire": 2,
            "horse": 12,
            "eye": 123
          }
       }
    ],
"__v": 0
}]}

My useContext is that:

  useEffect(() => {
    getUser()
  },[])

  const[user, setUser] = useState({})

  const getUser = async () => {
    const response = await fetch('http://localhost:8081/users/get_friends')
    const data = await response.json()
    setUser(data.user[0])  
  } 

  return(    
    <UserContext.Provider value={[user, setUser]}>
      {props.children}
    </UserContext.Provider>
  )

I think that it can be some asynchronous problem, but I dont know how to solve it…

Answer

Issue

Your initial state doesn’t have a friends array to map for the initial render before data has been fetch and state updated.

const[user, setUser] = useState({});

Solution

Provide valid initial state. The initial state should include any nested initial state that is referenced on the initial render. If your UI is mapping a user.friends array then it needs to be available to do so.

const[user, setUser] = useState({
  friends: [],
});

Leave a Reply

Your email address will not be published. Required fields are marked *