По какой-то причине после сопоставления события onClick на <li>не будет работать. реагировать js

Question

Пытаюсь сделать поле поиска выпадающим списком. По какой-то причине после сопоставления массива и составления списка из нескольких «li» обработчик onClick отправляет функции 3 предложения offerSelected (value), даже не нажимая ни на одно из них!

Пожалуйста, помогите вопрос? Прилагаю скриншот, на котором показаны мои попытки ввести название города, начинающееся с буквы "s". См. Вывод в консоли.

Данный фрагмент кода закомментирован.

import React from 'react';
import shortid from 'shortid';
import modules from './CityForm.module.css';


export default class ToDoForm extends React.Component {
  state = {
    text: '',
    items: ["Moscow", "Saratov", "Singapore", "New York"],
    suggestions: []
  };

  handleChange = (event) => {
    this.setState({
      text: event.target.value
    });

    const value = event.target.value;
    let suggestions = [];
    if (value.length > 0) {
      const regex = new RegExp(`^${value}`, 'i');
      suggestions = this.state.items.sort().filter(v => regex.test(v));
    }
    this.setState({
      suggestions: suggestions
    });
  }

  renderSuggestions() {
    const { suggestions } = this.state;
    if (suggestions.length === 0) {
      return null;
    } else {
      return (
        <ul className={modules.dropdown_list}>
          {suggestions.map((item) => <li onClick={this.suggestionSelected(item)}> {item} </li>)}
        </ul>
      )
    }
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.onSubmit({
      id: shortid.generate(),
      text: this.state.text
    });
    this.setState({
      text: ''
    });
  }

  suggestionSelected(value) {
    console.log(value);
    // this.setState({
    //  text: value,
    //  suggestions: []
    // });
  }

  render() {

    const { items } = this.state;

    return (

      <form
        className={modules.search_row}
        onSubmit={this.handleSubmit}>
        <div>
          <input
            autoComplete="off"
            className={modules.input}
            name={modules.text}
            value={this.state.text}
            onChange={this.handleChange}
            placeholder="E.g. Moscow..."
            onKeyUp={this.filterOptions}
          />
          {this.renderSuggestions()}
        </div>
        <button
          className={modules.addcity_btn}
          onClick={this.handleSubmit}>
          Add city
                </button>
      </form>

    )
  }
}

введите описание изображения здесь

Заранее спасибо.

Answer 1

попробуйте изменить вызов функции изображения на

  { suggestions.map((item) => <li onClick={() => this.suggestionSelected(item)}> {item} </li> ) }

, передав его как onClick={this.suggestionSelected(item)}, это фактически вызывает функцию this.suggestionSelected(item) при рендеринге

, если вы wi sh чтобы передать что-то обратно в качестве параметра в самом назначении обратного вызова, передайте его как ссылку на функцию

onClick={() => this.suggestionSelected(item)}

Answer 2

Неправильно: <li onClick={this.suggestionSelected(item)}>

Правильно: <li onclick={(evt)=>this.suggestionSelected(item) }