japan123

Компонент Item, обработчик onImportantClick - надо останавливать всплытие события, чтобы оно не обрабатывалась ещё и в onItemClick, т.е.:

onImportantClick = (e) => {
  e.stopPropagation();
  this.setState(({ important }) => ({
    important: !important
  }));
};

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

Что вы понимаете под "мутабелен" и "иммутабелен" по отношению к методам массива я не знаю, и знать не хочу. Но могу точно сказать - не то, что надо. Вам явно стоит заглянуть сюда.

Делайте копию массива перед splice'ом, и сам splice выполняйте над копией - так же, как push при добавлении элемента.

Кстати, о добавлении - почему у вас там в код метода зашита константа в качестве нового id? Нажали "добавить" два раза - вот и два элемента с одинаковыми id. Неужели так трудно было сгенерировать уникальный? Например.

Создать аккаунт разработчика бесплатно но вот если вы хотите выложить прижоление придется оплатить. Мак бук для этого покупать не обязательно. Но для загрузки билда надо иметь айфон

const AnswerItem = ({ onAnswerClick, answer: { id, text } }) => ...

Но лучше проверять существование объекта answer, если конечно не уверены точно, что он будет передан в любом случае.

Если я правильно понял. Вы хотите, чтобы контейнер занимал 100% экрана и блоки находились четко по центру.

В таком случае контейнеру нужно задавать height: 100vh // устанавливаем блоку 100% высоты экрана устройства пользователя

height: 100% не работает в этом случае потому, что у родителя контейнера нет элемента с фиксированной высотой, относительно которого высота контейнера могла бы генерироваться, если мы задаем ее в процентах

JSX это синтаксический сахар над вызовом React.createElement. Поэтому описаный с помощью JSX svg элемент это лишь вызов React.createElement, который возвращает объект, являющийся так называемым Virtual DOM Node, по нему библиотека строит узел в реальном DOM.

Для решения вашей задачи можно использовать ref.

let iconRef;
const getIconRef = node => iconRef = node;

const IconsList = {
  internet: (
    <svg ref={getIconRef} width="22px" height="16px" viewBox="0 0 22 16" version="1.1">
      /* ... */
    </svg>
  ),
];

copyToClipboard = text => {
    var textField = document.createElement("textarea");
    textField.innerText = iconRef;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand("copy");
    textField.remove();
  };

если иконок много, то рациональней использовать renderToString из пакета react-dom/server

import { renderToString } from 'react-dom/server';

textField.innerText = renderToString(/* иконка описанная JSX */);

Объект-то в строку надо превратить.

Добавляете

import ReactDOMServer from 'react-dom/server';

в начало вашего index.js, затем

textField.innerText = IconsList.internet;

меняете на

textField.innerText = ReactDOMServer.renderToStaticMarkup(IconsList.internet);

А в современный Javascript нельзя?

app.post('/api/search', async function(req, res) {
	var query = {}
	var reserveNomersIds;
	var filter = {}

	//price
	if (req.body.min && req.body.max) {
		query.cost_per_night = {$gte: req.body.min, $lte: req.body.max}
		//по возрастанию
		filter.cost_per_night = 1
	}
	//dates
	if (req.body.from && req.body.to) {
		reserveNomersIds = await Reservation.distinct("nomer", {
			from: {
				$lt: new Date(req.body.to)},
				to: {$gt: new Date(req.body.from)
			}
		});
	}
	if (req.body.guests > 1) {
		query.occupancy = {$gte: req.body.guests}
	}
	if (req.body.search) {
		query.city = { $regex: req.body.search.toLowerCase() }
	}
	try {
		var result = await Nomer
			.find({ _id: { $nin: reserveNomersIds}, query})
			.sort(filter);

		res.json(result);
	} catch (e) {
		res.send(e);
	}
})

При получении данных запоминаете список уникальных значений params, строите по ним выпадающий список, при выборе элемента списка запоминаете выбранное в массив selectedParams, при составлении filteredStudios проверяете, чтобы все params студии были в selectedParams, как-то так.

const min = res.data.reduce(
  (acc, el) => (acc > el.price ? el.price : acc),
  Infinity
);

const max = res.data.reduce(
  (acc, el) => (acc < el.price ? el.price : acc),
  -Infinity
);

this.setState({ studios: res.data, isLoading: false, min, max });

Вызов setState пусть будет один, а при вычислении минимума и максимума обращайтесь не к стейту, а к только что полученным данным. Т.е., вместо

this.setState({ studios: res.data, isLoading: false })
this.setState({ max: this.state.studios.reduce((l, e) => (e.price > l.price ? e : l)) });
this.setState({ min: this.state.studios.reduce((l, e) => (e.price < l.price ? e : l)) });

пусть будет

this.setState({
  studios: res.data,
  isLoading: false,
  max: res.data.reduce((l, e) => (e.price > l ? e.price : l), -Infinity),
  min: res.data.reduce((l, e) => (e.price < l ? e.price : l), Infinity),
});

// или, без reduce'ов

const prices = res.data.map(n => n.price);

this.setState({
  studios: res.data,
  isLoading: false,
  max: Math.max(...prices),
  min: Math.min(...prices),
});