Поведение React запускает все кнопки на рендере

Question

Я создаю список лиц и 'кнопок удаления' с помощью map() для визуализации в компоненте React (передача сопоставленного списка через реквизиты и рендеринг внутри тега <p>).

Когда рендеринг реакции первый, он запускает все кнопки onClick() и кнопки перестают работать.

Почему это происходит, пожалуйста?

  const deletePerson = (id) => {
    console.log(`deleting id: ${id}`)
  }

  const mappedPersons = persons.map(person => 
    <li key={person.name}>
      {`${person.name} - `}
      {`${person.phone} `}
      <button onClick={deletePerson(`${person.id}`)} value={person.id}>
        delete person
      </button>
    </li>
)

консоль:

deleting id: 1
deleting id: 2
deleting id: 3
deleting id: 4
deleting id: 5
deleting id: 6
deleting id: 7
deleting id: 8

Answer 1

ответ получен: Функция React onClick срабатывает при рендеринге

при изменении кнопки onClick на:

<button onClick={() => deletePerson(`${person.id}`)} value={person.id}>
        delete person
      </button>

карта перестает вызывать функцию визуализации.