Как добавить введённые данные в списки при этом не удаляя данные введённые раньше?

Question

[Daniil]

На сайте ввожу имя и фамилию. Как эти данные отобразить в <ul></ul>? То есть сколько ввожу имен и фамилий столько они и отображаются в <ul></ul>. Знаю, что надо использовать .map(), но когда я его использовал, он просто добавлял новые данные, а предыдущие удалял.

import React,{Component} from 'react';
import './App.css';

class PersonInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        first_name: "",
        last_name: ""
    };
    this.newFighterFirstname = this.newFighterFirstname.bind(this);
    this.newFighterLastname = this.newFighterLastname.bind(this);
    this.myButton=this.myButton.bind(this);
  }
  newFighterFirstname(event) {
    this.setState({first_name: event.target.value});
  }
  newFighterLastname(event) {
    this.setState({last_name: event.target.value});
  }
  myButton(event) {
  this.setState({last_name: ""});   //нужны для очищение полей в input
  this.setState({first_name: ""});   //нужны для очищение полей в input
  }
  render() {
    return (
      <div>
        <form >
          <input type="text" 
          placeholder="Имя" 
          value={this.state.first_name}
          onChange={this.newFighterFirstname} 
          /> 
          <input  type="text" 
          placeholder="Фамилия"
          value={this.state.last_name}
          onChange={this.newFighterLastname}
          />
          <button onClick={this.myButton}>Сохранить</button>      
          <ul>     //здесь должны отображаться сохранённые имена и фамилии
          </ul> 
        </form>
      </div>
    )
  }
}
export default PersonInput;

Answer 1

[cython]

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

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

Answer 2

[Kirill Makarov]

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