I'm working with zustand and typescript. I got this error on my code
Property 'filter' does not exist on type 'object'.ts(2339)
I don't know how to fix this problem. I'm creating an object from my useStore library. I tried usin 'type' but it throws these errors on the code editor error
TS
import React from "react";
import "./App.css";
import create from "zustand";
type PkState = {
filter: "",
pokemon: [],
}
const useStore = create((PkState) => ({
PkStateFilter: (filter) =>
PkState((state) => ({
...state,
filter,
})),
PkStatePokemon: (pokemon) =>
PkState((state) => ({
...state,
pokemon,
})),
}));
// input
const FilterInput = () => {
const filter = useStore((state) => state.filter);
const PkStateFilter = useStore((state) => state.PkStateFilter);
return ( <input value={filter} onChange=((evt)=>PkStateFilter(evt.target.value)) />
)
};
function App() {
return <div className="App"></div>;
}
export default App;
You need to define a type for your store.
import React from "react";
import "./App.css";
import create from "zustand";
type State = {
filter: string;
pokemon: Array<string>;
setFilter: (filter: string) => void;
setPokemon: (pokemon: Array<string>) => void;
};
// You have to use the type here
const useStore = create<State>((set) => ({
filter: "", // set initial values here
pokemon: [],
setFilter: (filter) =>
set((state) => ({
...state,
filter
})),
setPokemon: (pokemon) =>
set((state) => ({
...state,
pokemon
}))
}));
// input
const FilterInput = () => {
const filter = useStore((state) => state.filter);
const setFilter = useStore((state) => state.setFilter);
return (
<input value={filter} onChange={(evt) => setFilter(evt.target.value)} />
);
};
function App() {
return (
<div className="App">
</div>
);
}
export default App;