Использование констант в компонентах React

Question

Я пытаюсь что-то напечатать, чтобы утешить при нажатии на элемент списка.Но список определяется как константа вне компонента, использующего его.Очевидно, что onclick / logItem здесь не работает.Как бы вы поступили об этом?

Как ни странно, он регистрирует каждый элемент списка на консоли, когда компонент монтируется.

Мой код:

import React, { Component } from 'react';

const LIST_ITEMS = require('./ListItems.json');

const myList = 
  LIST_ITEMS.data.Items.map((Item) => (
    <li key={Item.id} onClick={logItem(Item.name)}>
      {Item.name.toUpperCase()}
    </li>
  ))
;

function logItem(name){
  console.log(name);
}

class ItemList extends Component {

  render() {
    return (
      <div id="item-list-wrapper">
        <h3>Select an Item</h3>
                <ul id="item-list">{myList}</ul>
      </div>
    );
  }
}

export default ItemList;

Answer 1

Вы должны передать функцию onClick, а не результат вызова logItem:

onClick={() => logItem(Item.name)}