Извиняюсь! Не туда отправил

Как относитесь к такой структуре проекта при styled components?

1. Любой файл, где находится компонент для экспорта, имеет окончание .jsx, что указывает на наличие разметки.
2. Любой скрипт/стили будут иметь название принадлежности к модулю и иметь расширение .js

Как результат, в папке будет index.jsx с самим компонентом, и ComponentName.js с его стилями.

Все эти издержки ради красивой и понятной разметки классов в devtools, так как styled components берет название файла+название компонента для формирования класса.
Это в разы облегчает дебаг, к примеру

Что скажете?

Как по мне - такое себе
styled-components - это не стили, это компоненты, я предпочитаю их хранить вмсете с компонентами
Ну и люблю осмысленные имена файлов, а индекси использую для реэкспорта из модуля

Но ведь при дебаге верстки styled будет вместо класса вписывать тарабанщину, и иногда определеить принадлежность блока можно только по стилям внутри него

Я выношу стайледы в отдельный файл если:
- они будут реиспользоваться внутри более мелких компонентов
- они занимают много места и бесят
в файл styled.js, внутри этого файла, для большего понимания того, где реакт-компонент а где стили, я экспортирую их внутри namespace object S
т.е.

const Footer = styled.footer
  position: fixed;

export const S = {
  Footer,
}

Таким образом, сам компонент внутри выглядит так:

<S.Footer>
<OtherReactCmp />
</S.Footer>

Выглядит как-будто бы чище

Мой основной тейк - что бы были нормальные классы в девтулзах
Разве можно нормально дебажить, когда исследуешь класс "jda324df" вместо "Header__Wrapper—dfgdfg4" ?

Выше скинули ссылку как это решить

Для этого же babel плагин есть

Это не решение, а костыль
Выпиливать название файла из класса - плохо, так как будет куча wrapper в разметке

Я предлагаю тот же подход что и
ComponentName.js
ComponentName.scss

Но с заменой основного файла на индекс для большего удобства

Даже если куча папок открыто, сразу видно где компонент, а где его стили

В .js файле лежит компонент, который как-то относится к другому компоненту Discount, а как он к нему относится - не понятно)
Плюс, я против тонны индексов, мне это приносит кучу неудобств (и да, я умею пользоваться поиском в релакторе)

* в .jsx компонетне, а не .js
В .js может быть любой код, но не реакт-разметка
В этом и ключевое отличие

Плюс в ВС коде значки даже разные

Тейк про то что не ясно как относится - они в одной папке, кмон
И по поиску через F1 находим сразу два файла

Ребят, привет.

Подскажите, пожалуйста. Создал метод удаления файла. Проблема в том, что при удалении из filtered, из стейта удаляется с опозданием, что видно в консоли - filtered пустой, а в uploadedFiles еще лежит объект.

С помощью чего можно исправить данную ситуацию?

spread не помогает