Кирилл Матросов

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

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

Добавьте в блок head строчку
<meta charset="utf-8">

Вариант 1

const arr = objArray.map(obj=>({...obj, foo: 10}));

Вариант 2

const arr = objArray.map(obj=>Object.assign({}, obj, {foo: 10}));

Надо переписать объект sms

someFunction = () => {
      const {sms} = this.state;
      sms.disabled = true;
      this.setState({sms});
}

Таким образом вы обновите поле disabled в sms
--------
Или еще так

someFunction = () => {
      this.setState({sms: {...this.state.sms, disabled: true}});
}

--------
еще так можно

someFunction = () => {
      this.setState(prevState=>({sms: {...prevState.sms, disabled: true}}));
}

Последний вариант самый устойчивый к коллизиям, связанным с изменением стейта в других места программы

Надо сравнить высоту блоку и "скролл-высоту"

const block = document.getElementById('block');
const hasVerScroll= block.scrollHeight > block.clientHeight;
const hasHorScroll= block.scrollWidth > block.clientWidth;

1. Выполнять команду npm run eject, которая добавит все зависимости и конфиги в проект. Отменить нельзя
   
2. npm i --save-dev stylus stylus-loader
   
3. Дальше добавляем в webpack настройки обработку stylus (необходимо добавить и в development, и в production)
   

webpack.config -> module -> rules -> oneOf
developement - добавляем новое правило

{
            test: /\.styl$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: 'css-loader',
                options: {
                  // можно удалить, если не нужны css модули
                  modules: true,
                  localIdentName: '[name]__[local]--[hash:base64:5]',
                  camelCase: true,
                  sourceMap: true,
                },
              }, {
                // postcss-loader и autoprefixer уже есть в create-react-app
                loader: 'postcss-loader',
                options: {
                  plugins: () => [
                    autoprefixer({ browsers: ['>= 10%', 'last 2 versions'] })
                  ],
                  sourceMap: true,
                },
              }, {
                loader: 'stylus-loader',
                options: {
                  sourceMap: true,
                },
              }],
          },

production - редактируем обработку стилей на

{
            test: /\.(styl|css)$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: {
                    loader: require.resolve('style-loader'),
                    options: {
                      hmr: false,
                    },
                  },
                  use: [
                    {
                      loader: require.resolve('css-loader'),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                      },
                    },
                    {
                      loader: require.resolve('postcss-loader'),
                      options: {
                        // Necessary for external CSS imports to work
                        // https://github.com/facebookincubator/create-react-app/issues/2677
                        ident: 'postcss',
                        plugins: () => [
                          require('postcss-flexbugs-fixes'),
                          autoprefixer({
                            browsers: [
                              '>1%',
                              'last 4 versions',
                              'Firefox ESR',
                              'not ie < 9', // React doesn't support IE8 anyway
                            ],
                            flexbox: 'no-2009',
                          }),
                          cssMQPacker(),
                        ],
                      },
                    },
                    {
                      loader: require.resolve('stylus-loader'),
                      options: {
                        minimize: true
                      }
                    }
                  ],
                },
                extractTextPluginOptions
              )
            ),
            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
          },

Обратимся к документации CSS.
Псевдокласс nth-child определяет состояние элемента по соседям слева (before), соседей может быть 0. Тип узла-элемента не играет роли (текстовые узлы игнорируются).
Поэтому 0 и 4 имеют один цвет, так как 0 получает красный, как первый в div, а 4й (он же пятый, если считать от 1цы) так же красный, так как в его случае nth-child учитывает 4х соседей слева.

Как сделать с помощью nth-child я не могу придумать)
Я бы сделал таким образом с помощью nth-of-type , который так же определяет по соседям слева, но учитывая тип первого узла, который получил этот класс. + обернул то, что надо пропустить в div.
В примере ниже у узлов один и тот же класс, но псевдокласс будет окрашивать их по типу

.test:nth-of-type(odd) {
  background-color: red;
}

<div> 
    <div class="test">div</div>
    <p class="test">p</p>
    <p class="test">p</p>
    <div class="test">div</div>
    <p class="test">p</p>
    <div class="test">div</div>
    <ul class="test">ul</ul>
    <div class="test">div</div>
</div>

Вы используете this.setState в function ,
response.json().then(function(data)
у которой свой this, а не this класса LibraryContent.

Надо заменить на стрелочную функцию, как выше
.then(response => {

console.log("Эта строка в консоль уже не выводится");

Это не выполняется, так выше у this нет setState, следовательно должна была произойти ошибка

this.setState is not a function

Я сделал так

inner class holder(itemView: View?) : RecyclerView.ViewHolder(itemView) 
        private val play: ImageView? = itemView?.findViewById(R.id.main_vase_rallies_play)

        init {
            itemView?.setOnClickListener {
                println("all view")
            }
            play?.setOnClickListener {
                println("play")
            }

        }
}

Является ли это хорошей практикой?

VanillaJs

function onClickClose(elem) { // вызвать в момент показа окна, где elem - окно
    function outsideClickListener(event) {
        if (!elem.contains(event.target) && isVisible(elem)) {  // проверяем, что клик не по элементу и элемент виден
             elem.style.display = 'none'; //скрыть
             document.removeEventListener('click', outsideClickListener);
        }
    }
    document.addEventListener('click', outsideClickListener)
}
function isVisible(elem) { //открыто ли условное окно
   return !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
}