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)


    <div className="css-home">
      <div className="css-home-div-find">
        <input className="css-home-find" placeholder="Typo here to find someone" type="text"/>
      <div className="css-overflow css-home-friends">
 => (

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(() => {

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

  const getUser = async () => {
    const response = await fetch('http://localhost:8081/users/get_friends')
    const data = await response.json()

    <UserContext.Provider value={[user, setUser]}>

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



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({});


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 *