type GetStrKeys<T> = keyof {[K in keyof T as T[K] extends string ? K : never]: T[K]};
type SortKeys = GetStrKeys<IPost>;
.......
const [selectedSort, setSelectedSort] = useState<SortKeys>(); // SortKeys | undefined;
const sortedPosts = useMemo(() => selectedSort
? [...posts].sort((a, b) => a[selectedSort].localeCompare(b[selectedSort]))
: posts,
[posts, selectedSort]
);
.....
<PostList posts={sortedPosts} sortPosts={setSelectedSort} remove={deletePost} />import {myFunc} from '....';
........
const handleChangeRoadCosts = (id: number, keyVal: string, val: string) => {
return myFunc(id, keyVal, val, data);
};export const setFrame = (titlle: string): setFrameActionType => ({ type: 'SETFRAME', payload: { titlle } });const [field, updateField] = useReducer(fieldReducer, []);function useReducer<R extends Reducer<any, any>>(
reducer: R,
initialState: ReducerState<R>,
initializer?: undefined
): [ReducerState<R>, Dispatch<ReducerAction<R>>];setItems((prev) => {
const i = prev.findIndex(item => item.id === id);
if (i < 0 || prev[i].isClicked) {
return prev;
}
const newArr = [...prev];
newArr[i] = {...prev[i], isClicked: true};
return newArr;
});<>
{
rename ? (
<div><Counter title='Щелкунчик' /></div>
) : (
<div><Counter title='Counter' /></div>
)
}
<button onClick={() => setRename(!rename)}>Переименовать</button>
</><>
{ rename && <div><Counter title='Щелкунчик' /></div> }
{ !rename && <div><Counter title='Counter' /></div> }
<button onClick={() => setRename(!rename)}>Переименовать</button>
</>const useHint = (hintTime?: number): VoidFunction => {
const dispatch = useAppDispatch();
return () => {
dispatch({ type: setHintState.type, payload: { state: true } })
setTimeout(() => {
dispatch({ type: setHintState.type, payload: { state: false } })
}, hintTime && 300);
};
};
...
const Item: FC = () => {
const runHint = useHint(500);
return (
<>
<CopyButton
className='contacts-group-item-field__btn'
onClick={() => {
runHint(500);
navigator.clipboard.writeText('test')
}}
/>
</>
)
}<React.Fragment key={...}>
{idx >= 1 && <div> / </div>}
<Crumb path={crumb.path} title={crumb.title} style={styles.crumbs} />
</React.Fragment>