Почему индекс какой-то класс, а не целое число?

Question

В приведенном ниже коде функция handle выводит класс на консоль вместо индекса. Как получить метод дескриптора для печати индекса ?? Я передаю индекс из функции map в метод handle.

class Sample extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            folks: [
                {name: "Phil", age: 22},
                {name: "Zander", age: 39},
                {name: "Tobias", age: 37}
            ]
        }
    }

    handle(i) {
        console.log(i)
    }
    render() {
        return (
            <div className="container">
                <ul>
                    {this.state.folks.map((person, index) => {
                        return (
                        <li onClick={ index => {this.handle(index)}} key={index + " person"} >
                        {person.name} {person.age}
                        </li>
                        )
                    })}
                </ul>
            </div>
        )
    }
}
ReactDOM.render(<Sample />, document.getElementById('app'))

Answer 1

Вы, кажется, повторно объявляете свою индексную переменную. Сделайте это:

render() {
    return (
        <div className="container">
            <ul>
                {this.state.folks.map((person, index) => {
                    return (
                    <li onClick={() => {this.handle(index)}} key={index + " person"} >
                    {person.name} {person.age}
                    </li>
                    )
                })}
            </ul>
        </div>
    )
}