<div className="todoListMain"> <div className="header">
.todoListMain.header input {.todoListMain и .header куда потерялся? Ну и с остальными стилями косяк тот же.
массивСДанными.map((n, i) => {
const Component = i % через_сколько_там_надо_чередовать_компоненты
? КомпонентРаз
: КомпонентДва;
return <Component {...n} />;
})function Ranges(props) {
const onChange = ({ target: t }) => {
const index = +t.dataset.index;
const value = +t.value;
const values = props.values.map((n, i) => i === index ? value : n);
if (props.max >= values.reduce((acc, n) => acc + n, 0)) {
props.onChange(values);
}
};
return (
<div>
{props.values.map((n, i) => (
<div>
<input
type="range"
data-index={i}
max={props.max}
value={n}
onChange={onChange}
/>
{n}
</div>
))}
</div>
);
}React.useEffect(() => {
fetch(props.link)
.then(r => r.json())
.then(setItems);
}, [ props.link ]);const [ sort, setSort ] = useState(false);
const sorted = useMemo(() => {
return [...data].sort((a, b) => {
return a.name.localeCompare(b.name) * (sort ? -1 : 1);
});
}, [ sort ]);<button onClick={() => setSort(sort => !sort)}>Сортировать</button>const filteredPeople = people.filter(n => n.name.includes(searchFilter));<ul className="list-group">
{filteredPeople.map(n => (
...key={elem * Math.random()}при добавлении новых 20 в массив перерисовываются ещё и старые 300
const [ items, setItems ] = useState([
{ id: ..., text: '...', active: false },
{ id: ..., text: '...', active: false },
...
]);const reset = () => setItems(items.map(n => ({ ...n, active: false })));<button onClick={reset}>reset</button>const toggle = id => setItems(items.map(n => n.id === id ? { ...n, active: !n.active } : n));{items.map(n => <Text key={n.id} {...n} toggle={toggle} />)}const Text = ({ id, text, active, toggle }) => (
<p
className={active ? 'active' : ''}
onClick={() => toggle(id)}
>
{text}
</p>
);Понимаю, что это как-то связано с преждевременным размонтированием компонента перед завершением api запроса.
айдишник удаляемой строки это сугубо системная информация, никак не влияющая на отображение
const [ delId, setDelId ] = useState(null);<button onClick={() => setDelId(row.id)}>Delete<Modal isVisible={!!delId}><button onClick={() => setDelId(null)}>CloseThe useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.
const sortOptions = [
{ key: '...', type: '...' },
{ key: '...', type: '...' },
...
];const sortFunctions = {
type1: (a, b) => ...,
type2: (a, b) => ...,
...
};const [ sortIndex, setSortIndex ] = useState(0);
const onSortChange = e => setSortIndex(+e.target.value);<select value={sortIndex} onChange={onSortChange}>
{sortOptions.map((n, i) => <option value={i}>{n.key}</option>)}
</select>const sortedItems = useMemo(() => {
const { key, type } = sortOptions[sortIndex];
const f = sortFunctions[type];
return [...items].sort((a, b) => f(a[key], b[key]));
}, [ items, sortIndex, sortFunctions ]);Изучаю React по видеокурсу на YouTube
написал код символ в символ, как на видео, перепроверил с примером в репозитории учителя, но у меня не работает анимация
The prop `timeout` is marked as required in `CSSTransition`, but its value is `undefined`
<TransitionGroup>
{isLogoVisible && (
<CSSTransition classNames="option">
...<CSSTransition in={isLogoVisible} unmountOnExit timeout={2000} classNames="option">
...function Switch({ options, value, onChange }) {
const highlight = useRef();
useEffect(() => {
const activeButton = highlight.current.closest('.c-switch').querySelector('.is-active');
highlight.current.style.width = `${activeButton?.offsetWidth ?? 0}px`;
highlight.current.style.transform = `translateX(${activeButton?.offsetLeft ?? 0}px)`;
}, [ value ]);
return (
<div className="c-switch">
<div className="c-switch__highlight" ref={highlight}></div>
{options.map(n => (
<button
key={n.value}
className={n.value === value ? 'is-active' : ''}
onClick={() => onChange(n.value)}
>{n.text}</button>
))}
</div>
);
}React гарантирует, что идентичность функции setState стабильна и не изменяется при повторных рендерах.