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)}>Close
The 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
стабильна и не изменяется при повторных рендерах.
forcePage={currentPage}
).page - 1
и page + 1
. сбрасывается на 0 и начинает отсчет с предыдущего состояния
interface IFormData {
firstName: string;
lastName: string;
}
const [ formData, setFormData ] = React.useState<IFormData>({
firstName: '',
lastName: '',
});
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setFormData({
...formData,
[e.target.name]: e.target.value,
});
<CustomTextField name="firstName" value={formData.firstName} onChange={onChange} />
<CustomTextField name="lastName" value={formData.lastName} onChange={onChange} />
<!-- или -->
{Object.entries(formData).map(([ k, v ]) => (
<CustomTextField key={k} name={k} value={v} onChange={onChange} />
))}
async function fetchRepos(username) {
let result = [];
try {
result = (await axios.get(`https://api.github.com/users/${username}/repos`)).data;
} catch(e) {
console.error(e);
}
setRepos(result);
}
<Search onSearch={fetchRepos} />
function Search({ onSearch }) {
const [ searchValue, setSearchValue ] = useState('');
function onSubmit(e) {
e.preventDefault();
onSearch(searchValue);
}
return (
<form onSubmit={onSubmit}>
<input
type="text"
value={searchValue}
onChange={e => setSearchValue(e.target.value)}
/>
<button>Найти</button>
</form>
)
}
class App extends React.Component {
state = {
colors: [ 'раз цвет', 'два цвет', 'три цвет', 'ещё какой-то цвет', 'и ещё' ],
selectedColor: '',
}
onChange = e => {
this.setState({
selectedColor: e.target.value,
});
}
render() {
const { colors, selectedColor } = this.state;
return (
<div>
<select value={selectedColor} onChange={this.onChange}>
<option disabled hidden value="">SELECT COLOR</option>
{colors.map(n => <option>{n}</option>)}
</select>
{selectedColor &&
<p style={{ color: selectedColor }}>
{selectedColor} color selected
</p>
}
</div>
);
}
}