CODEWITHSUNDEEP
javascriptreactjstypescript
uKn_70
uKn_70

Reputation: 29

Problems using react context

I've been studying react and developing an app, but i got a problem using context. In one component I create the context and provide its value, but when I try to use the current value of context in another component, I have the default value. Code:

Component One:

export const OwnerInformationContext = React.createContext({})

function NameChoose() {

   ...
   const [ownerInformation,setOwnerInformation] = useState({})
 
    function onpressSubmitButton(e : FormEvent) {
        e.preventDefault();
        ...
        setOwnerInformation({name:'name',roomId:'id',owner:'true'})
    }

    return(
        <div className="page-container">
            <OwnerInformationContext.Provider value={ownerInformation} />
            ...
                <form onSubmit={onpressSubmitButton}>
                    ...
                </form>
            ...
    );
}

export default NameChoose;

So when i try to use by:

import { OwnerInformationContext } from '../NameChoose/index'

    function ComponentTwo(){

    const consumeOwnerContext = useContext(OwnerInformationContext)

    useEffect(() => {
                console.log(consumeOwnerContext)
        }, [])

    return <h1>test</h1>

    }

I got the default value provide in component one, that's {}.

Upvotes: 0

Views: 679

Answers (3)

key
key

Reputation: 21

import React, { useState, useEffect, useContext } from "react";

export const OwnerInformationContext = React.createContext({});

function ComponentTwo() {
const consumeOwnerContext = useContext(OwnerInformationContext);

useEffect(() => {
// You are using consumeOwnerContext inside useEffect, in that case add
// it as dependency if you want to see the updated consumeOwnerContext value

console.log(consumeOwnerContext);
}, [consumeOwnerContext]);

return <div>test</div>;
};

function NameChoose() {
const [ownerInformation, setOwnerInformation] = useState({});

function onpressSubmitButton(e) {
e.preventDefault();
setOwnerInformation({ name: "name",roomId: "id",owner: "true",});
}

return (
// The 'OwnerInformationContext.Provider' has to wrap the component 
// that will use its context value. In your case, ComponentTwo 
// has to be a child of NameChoose.


<OwnerInformationContext.Provider value={ownerInformation}>
<div className="page-container">
 <form onSubmit={onpressSubmitButton}>
   <button type="submit">Submit</button>
 </form>
</div>
<ComponentTwo />
</OwnerInformationContext.Provider>
);
}

export default NameChoose;

Upvotes: 0

zzzachzzz
zzzachzzz

Reputation: 101

It looks like your context provider is not actually wrapping any components, as it has a self-closing tag:

<OwnerInformationContext.Provider value={ownerInformation} />

It should be:

<OwnerInformationContext.Provider value={ownerInformation}>
  {/* Your child components here will have access to the context */}
</OwnerInformationContext.Provider>

Upvotes: 1

erano
erano

Reputation: 393

You are using useEffect as ComponentDidMount meaning only at start(mount) the value will be console log.

you should give consumeOwnerContext as a dependency to useEffect like this

useEffect(()=>{
  console.log(consumeOwnerContext);
},[consumeOwnerContext]);

And rename consumeOwnerContext to consumeOwnerValue, because you are getting the value out of the context using useContext.

After that when you will click on submit button you should have ComponentTwo console log it.

Upvotes: 0

Related Questions