ReactJS: Фильтровать рендеринг списка только по целым именам?

Question

В настоящее время я отображаю список данных, возвращаемых из API, используя функцию map() следующим образом:

renderLocation() {
    return this.props.locations.map(location => {
      return (
        <div key={location.id}>
          <div className="location">
            <h1>
              {location.name}
              {location.airport_code}
            </h1>
            <div className="location-secondary-info">
              <span>
                <i className="material-icons">airplanemode_active</i>
                {location.description}
              </span>
            </div>
          </div>
        </div>
      );
    });
  }

Теперь я хочу отфильтровать отображение, чтобы единственные locations, которыеотображаются те, которые имеют правильное значение поля name.Мои данные API выглядят так:

Я хочу, чтобы locations отображался, только если locations.name является действительным действительным названием города.

Так, например, местоположение с name из "Chicago O'Hare" будет действительным названием города и должно отображаться.Однако местоположение с name, равным "Chicago O'Hare A5C", не должно отображаться, поскольку в конце оно имеет A5C, что делает его недействительным.

Answer 1

Одним из подходов может быть использование регулярного выражения для фильтрации местоположений на основе наличия буквенно-цифрового суффикса подстроки в поле name местоположения с помощью следующего:

const filteredLocations = this.props.locations.filter(location => {
    return !location.name.match(/[A-Z0-9]+$/)
});

Приведенная выше логика в основном гласит:

"отфильтровать все места, где в имени места нет буквенно-цифрового слова в конце" .

Интеграция этого в вашу renderLocation() функцию может быть достигнута с помощью:

renderLocation() {

    /* Filter locations with name that doesn't have alphanumeric suffix word   */
    const filteredLocations = this.props.locations.filter(location => {
        return !location.name.match(/[A-Z0-9]+$/)
    });

    /* Render only the filtered location with name Chicago O'Hare */ 
    return filteredLocations.map(location => {
      return (
        <div key={location.id}>
          <div className="location">
            <h1>
              {location.name}
              {location.airport_code}
            </h1>
            <div className="location-secondary-info">
              <span>
                <i className="material-icons">airplanemode_active</i>
                {location.description}
              </span>
            </div>
          </div>
        </div>
      );
   });
}

Надеюсь, это поможет