Иначе смысл от этих компонентов если можно их добавить после новой идеи.Сначала нужно сделать просто и понятно. Потом, при необходимости, уже усложнять. Заранее усложнять себе жизнь совершенно ни к чему.
SettingsControl, например, у которого есть title и children (а в них может быть что угодно), то сможем переиспользовать блок для всех остальных настроек. Но, может, этот дизайн используется не только в настройках, а вообще по всему проекту - тогда разделение и именование будет уже другим.
oldPrice: dto.oldPriceProductCardDTO, вовсе не означает, что RTK магически вам все поля, полученные в ответ на запрос, переименует. Если сервер отдаёт old_price, то так и должно поле в интерфейсе называться. Интерфейс подстраивается под реальность, а не наоборот.
Так же есть вопрос по key, сыпет в консоль предупреждение, что кей не уникален в самом последнем return. Во-первых, я не пойму зачем там key, во-вторых, я не пойму как это пофиксить.Вы рендерите элементы массива (pages), и, чтобы отличать их друг от друга, Реакту нужен какой-то идентификатор (подробнее в документации). У вас он как бы есть, но, во-первых, как сказано выше, его ломает то, что вы храните в state уже отрендеренные компоненты, а во-вторых, вы в качестве ключа для всех элементов используете одно и то же значение (cardDetails.id), а оно должно быть уникальным.
как выключить двойной вызов setTimeout в dev modeНе надо его выключать, надо корректно чистить таймауты, для отлова таких проблем двойной вызов и делают.
<BannerContent key={currentSlide} currentSlide={currentSlide} /><motion.x /> ключи можно вообще убрать, без них песочница не ломается.
if (files[0].size > 150) {
setError('file', { type: 'custom', message: 'Недопустимый размер' });
}
...
setStep(2)const state = useMemo(() => {
return Math.floor(Math.random() * 100)
}, [value === 0 ? 0 : 1])- expect(result.current).toBe(5);
+ expect(result.current.current).toBe(5);return new Array(ingredient.count).fill(null).map((_, index) => <Meat key={index} />);Route params are defined by route file names. If a segment begins with $ like $invoiceId, the value from the URL for that segment will be passed to your loader.https://remix.run/docs/en/main/route/loader#params
onChange={(_, checked) => {}}setChecked(checked);handleClearField();const [checked, setChecked] = useState(false);
const handleClearField = (checked) => {
setChecked(checked);
if (checked) {
console.log('1');
} else {
console.log('2');
}
};
return (
<>
<FormControlLabel
control={
<Checkbox
checked={checked}
onChange={(event) => handleClearField(event.target.checked)}
/>
}
label="Тест"
/>
</>
);Почему мои поиски в попытках найти логику хука провалилисьКто ж вас знает ¯\_(ツ)_/¯
как выйти на следЯ поиском по репе на Гитхабе воспользовался: https://github.com/facebook/react/blob/6f18664b82b...
{navLinks.map((link) => (
<Icon href={link.href} key={link.svgIcon} title={link.svgIcon} className={isCurrent ? `active` : undefined} />
))}
...
import classNames, { type Argument } from "classnames";
type Props = {
title: string;
href: string;
className: Argument;
}
<Link href={props.href} className={classNames('svgh m-auto', props.className)>
<SvgMail width="30" height="30" viewBox="0 0 50 50" />
</Link>- img: {img1},
+ img: img1,img: {img1}, равна img: { img1: '... image content ...' }.<div className='region__top__cards'>
{product.map((product) => (
<Cards key={product.title} title={product.title} img={product.img} price={product.price} oldprice={product.oldPrice} rate={product.rate}/>
)}
</div><React.Fragment key={category}>
<h2>...</h2>
<ul>...</ul>
</React.Fragment>sliceHandler передаёте div-обёртку, а внутри функции думаете, что это какой-то его ребёнок.key через атрибут html-тега. Значение key даже через props нельзя получить, не говоря уже про html.