Валера \Сургучев

Нужно использовать спред чтобы они не перезатирали а добавляли

Думаю, что перед использованием react, нужно ещё js выучить.
Вы не сохраняете данные в массив, а всё время перезаписываете поля в state. Добавьте поле в state, где будете хранить массив сохранённых объектов, с данными об имени и фамилии. Таким образом можете его обновлять:

this.setState({
  ['имя_поля']: [...this.state['имя_поля'], {
    last_name: this.state.last_name,
    first_name: this.state.first_name
  }]
})

Это классический подход для любых серверных технологий на PHP, NodeJS, Python, Go, C#, Java и т.д.. По сути есть всего-лишь три варианта для работы веб-приложения: 1) статические данные, когда нечто выдается 1 в 1, HTML, JS, медиа-содержимое 2) динамические данные, когда они формируются стороной сервера и 3) клиентские приложения, когда сервер выдает данные, а формирование отображения и интерфейса происходит на клиенте. Есть так же гибридный подход, когда страницы подгружаются кусками или часть отображения формируется на клиенте.

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

const createArr = (source, maxLength) =>
  [...Array(1 + Math.random() * maxLength | 0)].map(() => source[Math.random() * source.length | 0]);


const [ arr1, arr2, arr3 ] = [...Array(3)].map(() => createArr(arr, 5));

Если элементы не должны повторяться, тогда так (исходный массив копируется и из него вырезаются случайные элементы):

const createArr = ([...source], maxLength) => Array.from(
  { length: Math.min(source.length, 1 + Math.random() * maxLength | 0) },
  () => source.splice(Math.random() * source.length | 0, 1)[0]
);

или, копируем исходный массив, перемешиваем копию, берём случайное количество элементов из начала:

function createArr(source, maxLength) {
  const arr = source.slice();

  for (let i = arr.length; --i > 0; ) {
    const j = Math.random() * (i + 1) | 0;
    [ arr[j], arr[i] ] = [ arr[i], arr[j] ];
  }

  return arr.slice(0, 1 + Math.random() * maxLength | 0);
}

const array = [{id: 123, color: 'black'},{id:12.4, color: 'green'}];

array.reduce((obj, {id, ...others}) => ({
  ...obj,
  [id]: {...others}
}), {});