i === 0 && useAuth()
setAllTODOS([...sortedTodos]);
setAllTODOS((prevTodos) => [...sortedTodos]);
<div id="app">
<div style="display: flex">
<div style="flex: 0 0 300px; background-color: tomato">1</div>
<div style="flex: 1 1 auto; background-color: pink; min-width: 0">
<div style="display: flex">
<div
style="
flex-basis: 50%;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
"
>
Prev pageeeeeeeeeeeeeeeeeeeeee
</div>
<div
style="
flex-basis: 50%;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
"
>
Next pageeeeeeeeeeeeeeeeeeeeee
</div>
</div>
</div>
<div style="flex: 0 0 200px; background-color: lightblue">3</div>
</div>
</div>
name: Exclude<keyof typeof FormCreator, 'prototype' | 'render'>,
const dataLocal = JSON.parse(localStorage.getItem('data') || '[]');
const value = localStorage.getItem('data');
if (value) {
const dataLocal = JSON.parse(value);
}
const value = localStorage.getItem('data');
if (!value) {
return;
}
const dataLocal = JSON.parse(value);
export const AuthContext = createContext({})
<AuthContext.Provider value={{currentUser, setCurrentUser}}> // тут нельзя использовать квадратные скобки при передаче значения
const {currentUser, setCurrentUser} = useContext(AuthContext) // тут нельзя использовать квадратные скобки при деструктуризации
export const AuthContext = createContext([])
<AuthContext.Provider value={[currentUser, setCurrentUser]}> // тут нельзя использовать фигурные скобки при передаче значения
const [currentUser, setCurrentUser] = useContext(AuthContext) // тут нельзя использовать фигурные скобки при деструктуризации
import {
createContext,
useContext,
useState,
type FC,
type Dispatch,
type SetStateAction,
} from "react";
type TAuthContext = [string | null, Dispatch<SetStateAction<string>> | null];
export const AuthContext = createContext<TAuthContext>([null, null]);
export const Form: FC = () => {
const [currentUser, setCurrentUser] = useContext(AuthContext);
return <>1</>;
};
export const App: FC = () => {
const [currentUser, setCurrentUser] = useState<string | null>(null);
return (
<>
<AuthContext.Provider value={[currentUser, setCurrentUser]}>
<Form />
</AuthContext.Provider>
</>
);
};
<li
{...sort}
>
<li
name={sort.name}
>
const {sortProperty, ...rest} = sort;
<li
{...rest}
>
const updateSearch: ChangeEventHandler<HTMLInputElement> = (event) => {};
или
const updateSearch = (event: ChangeEvent<HTMLInputElement>) => {};
onChange?: ChangeEventHandler<T> | undefined;
setMatched(findInput.matchFound.sort((first, second) => first.price[0] - second.price[0]));
setMatched([...findInput.matchFound.sort((first, second) => first.price[0] - second.price[0])]);
import { FC, useRef } from "react";
const data: { id: number; name: string }[] = [
{
id: 1,
name: "Первый"
},
{
id: 13,
name: "Тринадцатый"
},
{
id: 20,
name: "Двадцатый"
}
];
const App: FC = () => {
const divRef = useRef<HTMLDivElement>(null);
console.log(divRef.current);
return (
<>
{data.map((item) => (
<div ref={item.id === 13 ? divRef : undefined} key={item.id}>
{item.name}
</div>
))}
</>
);
};
export default App;
interface INavDataBase {
name: string;
link: string;
}
interface INavDataChilds {
name: string;
children: INavDataBase[];
}
type TNavData = INavDataBase | INavDataChilds;
export const navData: TNavData[] = [
{
name: "Название меню 1",
link: "path_to_page",
},
{
name: "Название меню 2",
children: [
{
name: "Название меню 1",
link: "path_to_page",
},
{
name: "Название меню 2",
link: "path_to_page",
},
],
},
];
// Здесь можно по разному проверять и hasOwnProperty или "link" in navData
export const isNavDataBase = (navData: TNavData): navData is INavDataBase =>
navData.hasOwnProperty("link");
export const isNavDataChilds = (navData: TNavData): navData is INavDataChilds =>
navData.hasOwnProperty("children");
navData.forEach((data) => {
if (isNavDataBase(data)) {
// Здесь будет автокомплит при обращении - data.link
} else {
// И здесь, хотя второго защитника мы не использовали - data.children
}
});