Алексей Милютин

Что находится в стейте components? Изначально там пустой массив. Что ты туда заносишь?

Во-первых,
onclick должен вызывать функцию с передачей item, в твоём случае передается контекст img.

Во-вторых,
removeThisComponent={removeComponent}
это вообще зачем?
Зачем передавать в компонент функцию для удаления, если нужно передать item. И этот item дальше использовать в onclick.

Encountered two children with the same key, `null`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Это говорит о том, что используется не уникальные, в пределах итерации key

Решил сам, все дело было в источнике ввода. Нужно использовать "США", вместо "США международная - ПК".

в REST архитектуре чаще использую JWT ниже ссылка на отличные объяснения Илья Климова о том что это такое и с чем его едят.

https://www.youtube.com/watch?v=vQldMjSJ6-w&t=1s

Не проще ли, просто ходить на собесы и просить зп на уровне "сходить 2 раза в ашан и умереть с голоду", а там и глядишь, если проявите себя, возьмут в штат.

Недавно знакомый (23 года), сделал пару пет проектов - один - сервис помощи в решении математики(пишешь задачу, тебе "оператор" пишет решение(3 вопроса бесплатно, потом за деньги), второй пет проект - поисковик книжек в формате epub. На 3х собесах его послали, сказали что слишком "мал", следующие 2 собеса он выбирал между большой компанией\маленькой зп, маленькой компанией\хорошей зп.

Итог: не бойтесь ходить на собеседования, как по мне, на работе быстрее постигнуть дзен, чем на недокурсах.

Очень давно проходил курс Оксфорда, смысл был в более лучшем обучении путем подключения рассеянного и сфокусированного мышления. Вся суть на картинке. Надо давать мозгу отдыхать, иначе объем потребляемой информации не усваивается(в виду необработанной, или недостаточной информации). Именно по этому у вас иногда зажигается "лампочка"(обычно после того как вы отвлеклись, или выспались) помогающая вам найти решение проблемы, которое на самом деле было так близко.

Погода влияет, магнитные бури, недосып, активность Солнца.
Никакой глубины, у меня, например, так тоже бывает.

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

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

Напишу как рекрутер, который отправляет подобный тестовые задания: обязательно использовать заявленный стек.
Объясню почему: тестовое задание придумывает далеко не рекрутер, а decision maker позиции в компании.
Зачастую стек ограничивают не потому, что очень так хочется, а потому что конкретная позиция предполагает конкретный стек.
К примеру, у нас в компании была junior позиция для фронта. Стек: js+react. Задание соответственно требовалось сделать тоже на нем.
И из 68 тестовых, только лишь 15 были сделаны с использованием необходимого стека, хотя об этом писалось в самом начале тестового задания. К чему это я - из конкуренции 68 человек на одно место, конкуренция превратилась в 15 человек на одно место. Из чего следует, что, делая тестовое по заданному стеку, Вы в разы повышаете свои шансы на трудоустройство.

ну вот, например: https://github.com/kriasoft/babel-starter-kit или https://github.com/piecioshka/boilerplate-babel-webpack

console.log и alert спешат на помощь! а где они не справятся, зовите Гаечку в лице react-dev-tools

const handleClose = useCallback(index => {
  setTodos(state => {
    const newState = [...state],
    newState[index] = { ...newState[index], checked: true },

    return newState;
  });
}, []);

react dev tools + redux dev tools + console.log + webpack-bundle-analyzer вам для начала за глаза.

А зачем тут фигурные скобки?

this.setState({
      text: [this.state.text.splice(index, 1)]
    })

так вы получите массив, в котором будет один элемент - массив (с которого вы удалили элемент).

Не надо такой код писать. Работайте с состоянием компонента. Пример:

class ListItem extends React.Component {
  state = { isActive: false };

  toggleClick = {
    this.setState(state => ({ isActive: !state.isActive }));
  };

  render () { /* ... */ }
}

this.setState(state => ({
  todoList: [...state.todoList, { id: nanoid(8), text: value, done: false }],
}));

для генерации id используется nanoid

{this.state.todoList.map(todo => (
  <Todo click={this.handleClick} key={todo.id} todo={todo} />
))}

У вас не массив приравнивается к null, а на момент вызова колбека, передаваемого в setState, SyntheticEvent перестает существовать.
У вас два варианта:
1. Записать значение e.target.value в переменную и передавать в колбек переменную:

handleSubmit = e => {
  if (e.keyCode === 13) {
    const { value } = e.target;

    this.setState(prevState => ({
      todoValue: [...prevState.todoValue, value],
    }));
    e.target.value = '';
  }
};

2. Использовать event.persist(), но тогда изменять значение e.target.value надо в колбеке setState, иначе вы перепишите значение раньше его сохранения в state:

handleSubmit = e => {
  if (e.keyCode === 13) {
    e.persist();

    this.setState(
      prevState => ({
        todoValue: [...prevState.todoValue, e.target.value],
      }),
      () => {
        e.target.value = "";
      }
    );
  }
};

Я бы использовал первый вариант.

Так же, вы должны использовать свойство key в списках:

{this.state.todoValue.map((item, index) => (
  <Li key={index} text={item} />
 ))}

Lists and keys