Using react context with react hooks in typescript
Code below demonstrates how I'm trying to implement react's context with react hooks, idea here is that I will be able to easily access context from any child component like this
const {authState, authActions} = useContext(AuthCtx);
To begin with I create a file that exports context and provider.
import * as React from 'react';
const { createContext, useState } = React;
const initialState = {
email: '',
password: ''
};
const AuthCtx = createContext(initialState);
export function AuthProvider({ children }) {
function setEmail(email: string) {
setState({...state, email});
}
function setPassword(password: string) {
setState({...state, password});
}
const [state, setState] = useState(initialState);
const actions = {
setEmail,
setPassword
};
return (
<AuthCtx.Provider value={{ authState: state, authActions: actions }}>
{children}
</AuthCtx.Provider>
);
}
export default AuthCtx;
This works, but I get error below in value of provider, probably because I add actions in, hence the question, is there a way for me to keep everything typed and still be able to export context and provider?
I beliebe I also can't place createContext into my main function since it will re-create it all the time?
[ts] Type '{ authState: { email: string; password: string; };
authActions: { setEmail: (email: string) => void; setPassword:
(password: string) => void; }; }' is not assignable to type '{ email:
string; password: string; }'. Object literal may only specify known
properties, and 'authState' does not exist in type '{ email: string;
password: string; }'. [2322] index.d.ts(266, 9): The expected type
comes from property 'value' which is declared here on type
'IntrinsicAttributes & ProviderProps<{ email: string; password:
string; }>' (property) authState: {
email: string;
password: string; }
reactjs typescript react-context react-hooks
asked Nov 16 '18 at 10:25
IljaIlja
10.5k51153285
add a comment |
Code below demonstrates how I'm trying to implement react's context with react hooks, idea here is that I will be able to easily access context from any child component like this
const {authState, authActions} = useContext(AuthCtx);
To begin with I create a file that exports context and provider.
import * as React from 'react';
const { createContext, useState } = React;
const initialState = {
email: '',
password: ''
};
const AuthCtx = createContext(initialState);
export function AuthProvider({ children }) {
function setEmail(email: string) {
setState({...state, email});
}
function setPassword(password: string) {
setState({...state, password});
}
const [state, setState] = useState(initialState);
const actions = {
setEmail,
setPassword
};
return (
<AuthCtx.Provider value={{ authState: state, authActions: actions }}>
{children}
</AuthCtx.Provider>
);
}
export default AuthCtx;
This works, but I get error below in value of provider, probably because I add actions in, hence the question, is there a way for me to keep everything typed and still be able to export context and provider?
I beliebe I also can't place createContext into my main function since it will re-create it all the time?
[ts] Type '{ authState: { email: string; password: string; };
authActions: { setEmail: (email: string) => void; setPassword:
(password: string) => void; }; }' is not assignable to type '{ email:
string; password: string; }'. Object literal may only specify known
properties, and 'authState' does not exist in type '{ email: string;
password: string; }'. [2322] index.d.ts(266, 9): The expected type
comes from property 'value' which is declared here on type
'IntrinsicAttributes & ProviderProps<{ email: string; password:
string; }>' (property) authState: {
email: string;
password: string; }
reactjs typescript react-context react-hooks
asked Nov 16 '18 at 10:25
IljaIlja
10.5k51153285
Where are you typing your context
– Shubham Khatri
Nov 16 '18 at 10:28
@ShubhamKhatri by default it inherits it fromcreateContext(initialState)issue is that creation is outside of function, hence I can't type actions I think. And I need those actions inside my function component as they update state. If I move context inside the function, I can easily type actions, but no longer export context and I think there will be complications since react function components are re-ran on each render
– Ilja
Nov 16 '18 at 10:45
add a comment |
Code below demonstrates how I'm trying to implement react's context with react hooks, idea here is that I will be able to easily access context from any child component like this
const {authState, authActions} = useContext(AuthCtx);
To begin with I create a file that exports context and provider.
import * as React from 'react';
const { createContext, useState } = React;
const initialState = {
email: '',
password: ''
};
const AuthCtx = createContext(initialState);
export function AuthProvider({ children }) {
function setEmail(email: string) {
setState({...state, email});
}
function setPassword(password: string) {
setState({...state, password});
}
const [state, setState] = useState(initialState);
const actions = {
setEmail,
setPassword
};
return (
<AuthCtx.Provider value={{ authState: state, authActions: actions }}>
{children}
</AuthCtx.Provider>
);
}
export default AuthCtx;
This works, but I get error below in value of provider, probably because I add actions in, hence the question, is there a way for me to keep everything typed and still be able to export context and provider?
I beliebe I also can't place createContext into my main function since it will re-create it all the time?
[ts] Type '{ authState: { email: string; password: string; };
authActions: { setEmail: (email: string) => void; setPassword:
(password: string) => void; }; }' is not assignable to type '{ email:
string; password: string; }'. Object literal may only specify known
properties, and 'authState' does not exist in type '{ email: string;
password: string; }'. [2322] index.d.ts(266, 9): The expected type
comes from property 'value' which is declared here on type
'IntrinsicAttributes & ProviderProps<{ email: string; password:
string; }>' (property) authState: {
email: string;
password: string; }
reactjs typescript react-context react-hooks
asked Nov 16 '18 at 10:25
IljaIlja
10.5k51153285
Code below demonstrates how I'm trying to implement react's context with react hooks, idea here is that I will be able to easily access context from any child component like this
const {authState, authActions} = useContext(AuthCtx);
To begin with I create a file that exports context and provider.
import * as React from 'react';
const { createContext, useState } = React;
const initialState = {
email: '',
password: ''
};
const AuthCtx = createContext(initialState);
export function AuthProvider({ children }) {
function setEmail(email: string) {
setState({...state, email});
}
function setPassword(password: string) {
setState({...state, password});
}
const [state, setState] = useState(initialState);
const actions = {
setEmail,
setPassword
};
return (
<AuthCtx.Provider value={{ authState: state, authActions: actions }}>
{children}
</AuthCtx.Provider>
);
}
export default AuthCtx;
This works, but I get error below in value of provider, probably because I add actions in, hence the question, is there a way for me to keep everything typed and still be able to export context and provider?
I beliebe I also can't place createContext into my main function since it will re-create it all the time?
[ts] Type '{ authState: { email: string; password: string; };
authActions: { setEmail: (email: string) => void; setPassword:
(password: string) => void; }; }' is not assignable to type '{ email:
string; password: string; }'. Object literal may only specify known
properties, and 'authState' does not exist in type '{ email: string;
password: string; }'. [2322] index.d.ts(266, 9): The expected type
comes from property 'value' which is declared here on type
'IntrinsicAttributes & ProviderProps<{ email: string; password:
string; }>' (property) authState: {
email: string;
password: string; }
reactjs typescript react-context react-hooks
reactjs typescript react-context react-hooks
asked Nov 16 '18 at 10:25
IljaIlja
10.5k51153285
asked Nov 16 '18 at 10:25
IljaIlja
10.5k51153285
asked Nov 16 '18 at 10:25
IljaIlja
10.5k51153285
asked Nov 16 '18 at 10:25
IljaIlja
10.5k51153285
asked Nov 16 '18 at 10:25
IljaIlja
10.5k51153285
10.5k51153285
Where are you typing your context
– Shubham Khatri
Nov 16 '18 at 10:28
@ShubhamKhatri by default it inherits it fromcreateContext(initialState)issue is that creation is outside of function, hence I can't type actions I think. And I need those actions inside my function component as they update state. If I move context inside the function, I can easily type actions, but no longer export context and I think there will be complications since react function components are re-ran on each render
– Ilja
Nov 16 '18 at 10:45
add a comment |
Where are you typing your context
– Shubham Khatri
Nov 16 '18 at 10:28
@ShubhamKhatri by default it inherits it fromcreateContext(initialState)issue is that creation is outside of function, hence I can't type actions I think. And I need those actions inside my function component as they update state. If I move context inside the function, I can easily type actions, but no longer export context and I think there will be complications since react function components are re-ran on each render
– Ilja
Nov 16 '18 at 10:45
Where are you typing your context
– Shubham Khatri
Nov 16 '18 at 10:28
Where are you typing your context
– Shubham Khatri
Nov 16 '18 at 10:28
@ShubhamKhatri by default it inherits it from
createContext(initialState) issue is that creation is outside of function, hence I can't type actions I think. And I need those actions inside my function component as they update state. If I move context inside the function, I can easily type actions, but no longer export context and I think there will be complications since react function components are re-ran on each render– Ilja
Nov 16 '18 at 10:45
@ShubhamKhatri by default it inherits it from
createContext(initialState) issue is that creation is outside of function, hence I can't type actions I think. And I need those actions inside my function component as they update state. If I move context inside the function, I can easily type actions, but no longer export context and I think there will be complications since react function components are re-ran on each render– Ilja
Nov 16 '18 at 10:45
add a comment |
1 Answer
1
active
oldest
votes
While creating Context, you are provifing an initial value to it, Provide it in the same format as your expect it to be for the Provider like
const initialState = {
authState : {
email: '',
password: ''
},
authActions = {
setEmail: () => {},
setPassword: () => {}
};
};
const AuthCtx = createContext(initialState);
Also, you don't even need the initialState since its only passed to Consumer, if you don't have a Provider higher up in the hierarchy for the Consumer
answered Nov 16 '18 at 10:50
Shubham KhatriShubham Khatri
94.4k15119160
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53335907%2fusing-react-context-with-react-hooks-in-typescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
While creating Context, you are provifing an initial value to it, Provide it in the same format as your expect it to be for the Provider like
const initialState = {
authState : {
email: '',
password: ''
},
authActions = {
setEmail: () => {},
setPassword: () => {}
};
};
const AuthCtx = createContext(initialState);
Also, you don't even need the initialState since its only passed to Consumer, if you don't have a Provider higher up in the hierarchy for the Consumer
answered Nov 16 '18 at 10:50
Shubham KhatriShubham Khatri
94.4k15119160
add a comment |
While creating Context, you are provifing an initial value to it, Provide it in the same format as your expect it to be for the Provider like
const initialState = {
authState : {
email: '',
password: ''
},
authActions = {
setEmail: () => {},
setPassword: () => {}
};
};
const AuthCtx = createContext(initialState);
Also, you don't even need the initialState since its only passed to Consumer, if you don't have a Provider higher up in the hierarchy for the Consumer
answered Nov 16 '18 at 10:50
Shubham KhatriShubham Khatri
94.4k15119160
add a comment |
While creating Context, you are provifing an initial value to it, Provide it in the same format as your expect it to be for the Provider like
const initialState = {
authState : {
email: '',
password: ''
},
authActions = {
setEmail: () => {},
setPassword: () => {}
};
};
const AuthCtx = createContext(initialState);
Also, you don't even need the initialState since its only passed to Consumer, if you don't have a Provider higher up in the hierarchy for the Consumer
answered Nov 16 '18 at 10:50
Shubham KhatriShubham Khatri
94.4k15119160
While creating Context, you are provifing an initial value to it, Provide it in the same format as your expect it to be for the Provider like
const initialState = {
authState : {
email: '',
password: ''
},
authActions = {
setEmail: () => {},
setPassword: () => {}
};
};
const AuthCtx = createContext(initialState);
Also, you don't even need the initialState since its only passed to Consumer, if you don't have a Provider higher up in the hierarchy for the Consumer
answered Nov 16 '18 at 10:50
Shubham KhatriShubham Khatri
94.4k15119160
edited Feb 20 at 6:59
answered Nov 16 '18 at 10:50
Shubham KhatriShubham Khatri
94.4k15119160
answered Nov 16 '18 at 10:50
Shubham KhatriShubham Khatri
94.4k15119160
answered Nov 16 '18 at 10:50
Shubham KhatriShubham Khatri
94.4k15119160
94.4k15119160
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53335907%2fusing-react-context-with-react-hooks-in-typescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Where are you typing your context
– Shubham Khatri
Nov 16 '18 at 10:28
@ShubhamKhatri by default it inherits it from
createContext(initialState)issue is that creation is outside of function, hence I can't type actions I think. And I need those actions inside my function component as they update state. If I move context inside the function, I can easily type actions, but no longer export context and I think there will be complications since react function components are re-ran on each render– Ilja
Nov 16 '18 at 10:45