CityList.jsx

class CityList extends Component {
  state = {
    cities: [
      {
        id: 1,
        name: 'Boston',
      },
      {
        id: 2,
        name: 'Cambridge',
      },
      {
        id: 3,
        name: 'Somerville'
      },
    ]
  }

  deleteCity = city => () => (
    this.setState(prevState => ({
      cities: prevState.cities.filter(({ name }) => name !== city.name),
    }))
  )

  render() {
    const { cities } = this.state

    return (
      <div>
      {
        cities.map((city) => (
          <div key={city.id}>
            <div onClick={this.deleteCity(city)}>X</div>
            <City name={city.name} />
          </div>
        ))
      }
      </div>
    );
  }
}