Foreign key (внешний ключ) - это механизм, который позволяет связывать данные из двух таблиц в базе данных, где одна таблица ссылается на другую посредством поля, которое является первичным ключом в таблице, на которую она ссылается.

Использование foreign key имеет несколько преимуществ. Одно из них - обеспечение целостности данных, то есть предотвращение появления некорректных значений в таблице. Когда вы устанавливаете foreign key, вы создаете ограничение, которое не позволит вставить запись в таблицу, если нет соответствующего значения в связанной таблице.

Чтобы создать foreign key, вы должны выполнить следующие шаги:

1. Создайте таблицу, которая будет ссылаться на другую таблицу:
   

   CREATE TABLE table1 (
       id INT PRIMARY KEY,
       name VARCHAR(50),
       table2_id INT,
       FOREIGN KEY (table2_id) REFERENCES table2(id)
   );

   
   
   
2. Создайте таблицу, на которую будет ссылаться первая таблица:
   

   CREATE TABLE table2 (
       id INT PRIMARY KEY,
       name VARCHAR(50)
   );

   
   
   
3. Установите связь между таблицами с помощью ключевого слова REFERENCES:
   FOREIGN KEY (table2_id) REFERENCES table2(id)
   
   

В этом примере, мы создаем таблицу table1, которая имеет поле table2_id, которое ссылается на поле id в таблице table2. С помощью ключевого слова FOREIGN KEY мы говорим базе данных, что это поле должно быть связано с полем id в таблице table2.

Также мы можем добавить ограничение ON DELETE, чтобы определить, что происходит с записями в таблице, которые связаны с удаленными записями из другой таблицы. Например:

FOREIGN KEY (table2_id) REFERENCES table2(id) ON DELETE CASCADE

В этом примере, мы указываем, что при удалении записи из таблицы table2, все связанные записи в таблице table1 также должны быть удалены (CASCADE).

Таким образом, использование foreign key может значительно улучшить целостность данных в вашей базе данных, облегчить ее обслуживание и предотвратить появление ошибок в будущем.

Передай в пропсы количество и циклом сгенерируй это нужное количество

//Перед обновление стейта сохраняешь текущую версию
const oldState = { ...state }
//Обновляешь стейт
setState({ foo: 'bar' });

//Этот код нужно выполнять в юзефект с депсами стейта
//Это массив измененных свойств 
const changedProperties = {};
for (const key in state) {
  if (state.hasOwnProperty(key) && oldState[key] !== state[key]) {
    changedProperties[key] = state[key];
  }
}

//Проверяем если были обновления и отправляем
if (Object.keys(changedProperties).length > 0) {
  fetch('/endpoint', {
    method: 'POST',
    body: JSON.stringify(changedProperties),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((response) => {
    if (response) {
      console.log('Данные успешно обновлены на сервере');
    } else {
      console.log('Не удалось обновить данные на сервере');
      // В случае ошибки апдейтп можно откатить  стейт
      setState(oldState);
  });
}

По коду сам смотри куда тебе проще запихнуть

Что находится в стейте 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