React Context value never updates

Question

I have the following code as a component that returns a context. For some reason when I call the updateUser function it is not setting the state, I keep getting a blank object. Is there something different I have to do to a function like that when it has parameters?

import React, { useState } from "react";
const UserContext = React.createContext({
  user: {},
  updateUser: (incomingUser) => {},
});
const UserData = (props) => {
  const [user, setUser] = useState({});

  const updateUser = (incomingUser) => {
    setUser(incomingUser);
    console.log(`user=${JSON.stringify(incomingUser)}`);
  };

  return (
    <UserContext.Provider value={{ user, updateUser }}>
      {props.children}
    </UserContext.Provider>
  );
};
export { UserData, UserContext };

lawrence-witt · Accepted Answer · 2021-08-04 22:09:25Z

1

Get rid of the default value for UserContext, or initialise it as null:

const UserContext = React.createContext(null);

Per the React Docs:

When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.

The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This default value can be helpful for testing components in isolation without wrapping them.

answered Aug 4, 2021 at 22:09

lawrence-witt

9,5023 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Context value never updates

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related