понимаю, но никак не могу использовать table, увы( именно такая структура нужна

Прочитал "такой" вместо "какой", сори.

Не требует декомпозиции такой компонент, который выполняет единственную функцию. В нём должно быть по минимуму логики — использованы хуки везде, где это облегчает композицию кода. Часто повторяющиеся относительно длинные фрагменты в рендере должны быть вынесены в отдельные компоненты.

Трудно представить код на 300 строчек, который легко читается и соблюдает все эти требования

ответил, тебе нужно резметку изменить.
Вот решение: https://jsfiddle.net/cet7gnxd/3/

Популярен. Его часто используют как раз для того, чтобы разрабатывать компонент в изоляции от остального приложения

понимаю, но нет такой возможности, это очень важное условие чтобы разметка была такой, какая она сейчас(

с той разметкой что у тебя, мне кажется на чистом css ни как не сделать.
знаю как на jQuery можно реализовать, но для реакта этот вариант не подойдёт

Берем например кнопку, у неё есть два вида расцветки. Есть варианты расцветки так же для состояний в фокусу, активна, выключена и когда на ней спинер отображается. Функция одна - это кнопка.  Если из такого компонента не выносить стайлед, то получается как раз около 300 строк

А если стайлды вынести, то что в компоненте останется?

Давайте даже по другому. Вот у нас есть так же кнопка, хрен с ним сколько в ней строк. У неё два варианта расцветки. Тут нам дезигнер приносит обновленный дизайн и теперь у неё три варианта расцветки. Как мы поступим в таком случае? Отнаследуемся от текущего компонента и переопределим ему стили ? Либо сделаем базовую кнопку, которая будет только нажиматься и еще три компонента с вариантами расцветки?

фифти фифти обычно

всем привет. есть компонент который принимает пропсы. Нужно для одного параметра установить значение по-умолчанию. Делаю это через defaultProps(функциональный компонент). Используется это свойство только в одной функции в компоненте, тоесть само свойство в return не попадает. Так вот, defaultProps не срабатывает, параметр = undefined. Правильно ли я понимаю что это связано как раз с тем что параметр не используется в return?

const Test = ({someParam}) => ({
 const dn = () => console.log(someParam);

 return <AnotherComponent />;
});

Test.defaultProps = {someParam: ''};

Есть люди которые делали логин через Apple на сайты?

может быть проще делать так: ({someParam = ""})

тут вопрос не в "проще", а почему не работает

я знаю за параметры по-умолчанию, хочу разобраться в вопросе выше

окей. я бы не стал разбираться в магии проп тайпой. не думаю, что это вообще актуальный инстурмент

++

Всем привет, подскажите, пожалуйста, в create react app пытаюсь подменять компоненты при отлове ошибки в getDerivedStateFromError и/или в componentDidCatch из дочернего компонента, но не удается. Много встречал инфы, что проблема в том, что в create react app используется dev mode, но в основном пишут, что это касается накладывающегося фрэйма на весь экран, в котором экранируется ошибка и решается либо сокрытием через дисплэй: ноне, либо банальным закрытием этой ошибки через крестик. Но проблема в том, что компонент не подменяется при ошибке. методы  getDerivedState или componentDidCatch даже не вызываются

разобрался, я допустил ошибку в слове defaultProps)))))

почему так не работает? почему не подменяется UI после клика на div, после которого происходит throw error ?  https://pastebin.com/GWHcWHJ9