Как правильно обратиться к указателю на текущий элемент массива?

Question

[Richard Millie]

Есть такой код, который выводит список постов:

import React from "react";


type respX = {
    "id": any,
    "userId": any,
    "title": any,
    "body": any,
}

interface PropsI {
}

interface StateI {
    data: respX[];
}

export class ComponentPostList extends React.Component<PropsI, StateI> {

    state: StateI = {data: []}

    async componentDidMount() {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/`);
        const json = await response.json();
        this.setState({data: json});
    }


    render() {
        return (
            <div className="About">
                {this.state.data.map(el => (
                    <li key={el.id}>
                        {el.title}
                    </li>
                ))}
            </div>
        );
    }
}

Как я могу вывести в консоль id элемента, по которому мы кликнули?

Comments

[Петр Мухуров]

<li key={el.id} onClick={() => console.log(el.id)}>
...

[Виталий]

Петр Мухуров, анонимная функция всегда будет новой, всегда рендер, плохой совет

[Петр Мухуров]

Виталий, нет смысла упарываться в ненужное псевдоулучшение перформанса, есть смысл кешировать функцию, если она производит какие-то тяжелые вещи (напр., связанные с рендерингом), либо количество этих функций зашкаливает. А закладываться на этапе изучения библиотеки на тонкие вещи, которые не всегда нужны - лишнее.
Да и не-анонимная функция типа
onClick={function boom() { ... }}
ничего нового не добавит, она все так же будет каждый раз создаваться по-новому

Answer 1

[re1mond]

{this.state.data.map(el => (
                    <li key={el.id} onClick = {() => {console.log(el.id)}}>
                        {el.title}
                    </li>
                ))}