Алексей Уколов

Зачем итерировать по кривому формату данных, если можно просто сразу его превратить в нормальный?

setItems(json[0].pizzas)
...
items.map((pizza) => <PizzaBlock key={pizza.title} {...pizza} />)

Как хотите, так и сделайте - людям в интернете без разницы, поддерживать этот код будете вы.

С точки же зрения теории есть две противоположных, но одинаково имеющих право на существование, теории: не нужно усложнять и не нужно усложнять.

Первая говорит о том, что не следует плодить сущности без необходимости, т.е. лучше оставить один компонент, если его структуру можно универсально описать. Тогда можно будет легко добавлять новые типы объектов без необходимости изменения кода.
Вторая говорит о том, что сложную задачу следует раздробить на несколько простых. И в этом случае вы делаете простые специализированные компоненты, пусть даже в них будет какое-то дублирование. Тогда можно будет легко разбираться с кодом каждого конкретного типа объектов, но добавление новых потребует изменения кода.
А между этими двумя крайностями есть целый спектр промежуточных решений.

В комментариях, я уверен, найдутся сторонники каждого из подходов и будут объяснять друг другу, что именно их подход является единственно верным. Выберите того, кто кажется вам наиболее убедительным (оба будут неправы, потому что решение зависит от особенностей конкретного проекта) и поступите как он советует. По мере создания всё новых и новых проектов вы будете понимать ограничения выбранного подхода и проблемы, которые он создаёт и попробуете диаметрально противоположный. Потом вы увидите и его ограничения и с этого момента можете добавлять в резюме приставку senior.

React не ждёт для запуска рендера максимально неудобного момента, чтобы вам насолить. Отрисовку триггерите вы сами, изменяя state или props. Никаких деталей про них вы не привели, так что точнее сказать ничего нельзя.

Попробуйте использовать что-то вроде этого:

class Something {
  state = {token: ``}

  render() {
    if (!this.state.token) {
      return null;
    }

    return <ВсёОстальное/>
  }
}

Да, только должно быть просто return initialState;

Во-первых, использовать порядковый номер в массиве в качестве key, особенно тогда, когда вы собираетесь этот массив изменять - плохая идея. Ключ должен быть жёстко привязан к конкретному элементу, индексы в массиве этого не обеспечивают.

Во-вторых, компонент CommentItem, вызывающий в какой-то момент переданную в него функцию removeItem(), должен в неё передавать тот самый идентификатор, по которому вы будете удалять элемент.

Примерный код:

{comments.map((comment) => (
  <CommentItem
    key={comment.id}
    id={comment.id}
    userName={comment.userName}
    commentText={comment.commentText}
    currentDate={comment.currentDate}
    currentTime={comment.currentTime}
    removeItem={removeCommentItem}
  />
)}

CommentItem = (id, removeItem) => {
   return (
    <button onClick={() => removeItem(id)}>Удалить</button>
  )
};

Свойству innerHTML в DOM браузера соответствует dangerouslySetInnerHTML в React. Как правило, вставка HTML из кода рискованна, так как можно случайно подвергнуть ваших пользователей атаке межсайтового скриптинга. Таким образом, вы можете вставить HTML непосредственно из React используя dangerouslySetInnerHTML и передать объект с ключом __html, чтобы напомнить себе, что это небезопасно.

https://ru.reactjs.org/docs/dom-elements.html#dang...

Нет, чтобы сделать мобильную версию сайта не необходимо делать его копию на React Native. Они вообще друг с другом никак не связаны. Из вопроса вашего непонятно ничего.

В response у айтемов key не имеется
Подскажите пожалуйста, как в таком случае задавать ключи?

Какое-то уникальное поле или набор полей же у них есть? Вот их в качестве ключа и используйте.

Event Listeners
You can also have Popper automatically update the position when certain events are fired, to learn more visit the Event Listeners Modifier page.

Hook into the lifecycle
There are situations where you may need to hook into the Popper's lifecycle to perform some additional logic.

If all you need is a callback ran after Popper positioned the element the first time, you can define the onFirstUpdate property in the Popper options:

createPopper(referenceElement, popperElement, {
  onFirstUpdate: state => console.log('Popper positioned on', state.placement),
});

If, instead, you want to run some logic on each update cycle, the best way to do that is to define your own custom modifier.

If you want to make sure to run your logic after all the other modifiers have ran, we suggest to set afterWrite as your custom modifier's phase.

https://popper.js.org/docs/v2/lifecycle/#event-lis...

popperOptions - Options provided to the Popper.js instance.

https://mui.com/api/popper

Дальше всё зависит от вашей конкретной задачи.

Ну вам же красным по белому написали - использовать Link можно только внутри компонента Router, вне его он не имеет смысла и не может работать. Вам следует вернуться к изучению документации: https://reactrouter.com/docs/en/v6/getting-started...

WebStorm почему-то выделяет Link отдельным цветом (желтым), а все остальные - серым.

Серым выделяются импортируемые, но никак не используемые модули.

Нужно как-то брать id последнего элемента и добавлять к нему 1?

Да.
Метод map тут ни при чём, форма же вне его рендерится. Добавьте компоненту формы prop, в который из родительского передавайте как раз "id последнего элемента + 1".
Получить id последнего элемента можно кучей способов, вот один из них для примера:

let maxId = 0;
props.articles.forEach((article) => maxId = article.id > maxId ? article.id : maxId);

В Реакте есть jsx, во Вью есть кастомные атрибуты тегов. Если это считается «конструкциями языка», то могут. Только в браузере они работать не будут, нужно скомпилировать в «обычный» javascript.

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

Отвязать загрузку от кнопок и привязать к жизненному циклу компонента (или хукам). Кнопки должны только менять URL, роутер в ответ на изменение рендерит компонент и в нём запрашиваются данные. Таким образом, когда при открытии страницы по прямой ссылке роутер точно так же отрендерит компонент, запрос будет сделан автоматически.

Примеров конкретных реализаций довольно много, выбирайте любой.

Конечно, Set игнорирует изменения пропса:

class Set extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            id: props.id,
            weight: null,
            reps: null,
            enableMaxReps: false,
            number: props.number || 0,
            isFilled: false,
        };
    }
}

Уберите number из state, зачем он там?

case 'loadNotes':
  return [ ...state, ...action.payload ];

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

dispatch(getListPosts())

Уберите:
.then(response => console.log(response))
Вызов console.log возвращает undefined, который передаётся дальше и попадает в setState.