Typescript: Can't use container without explicitly declared prop 'children' on it
tvardero opened this issue · comments
Can't declare store container using simple createContainer(MyStore)
, using this container results in error:
Apparently, container doesn't have children
field on it's props.
The only solution i found for myself is to explicitly declare children?: any
:
export const MyStoreContainer = createContainer<MyStoreState, MyStoreActions, { children?: any }>(MyStore);
Full store code (counter example from your docs, but in typescript):
import { Action, createContainer, createHook, createStore } from "react-sweet-state"
import { MyStoreActions } from "./actions";
import { MyStoreState } from "./states";
const initialState: MyStoreState = {
count: 0,
};
const actions: MyStoreActions = {
increment: (by = 1): Action<MyStoreState> => ({ setState, getState }) => {
setState({
count: getState().count + by,
});
},
}
const MyStore = createStore<MyStoreState, MyStoreActions>({ initialState, actions, name: 'my-counter' });
export const useMyStore = createHook(MyStore);
export const MyStoreContainer = createContainer<MyStoreState, MyStoreActions, { children?: any }>(MyStore);
Dependencies in package.json
:
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"react-sweet-state": "^2.6.0",
"typescript": "^4.4.2"
}
I'm new to React, Redux and Sweet State, maybe I'm doing something wrong? Or was it intended to explicitly declare props for containers?
Container tag is useless with self-closing html tag (<Container />
), so it expected to have children anyway.
Ouch, that is a change in React 18 types. As with @types/react^17
things are fine: createContainer
return type is ComponentType
, which alias FunctionComponent
which in turn has PropsWithChildren<P>
.
Seems like they removed it in v18, and now FunctionComponent
just uses P
.
Would you be happy to raise a PR to improve the return type?