SOME FUNS WITH REACT

import React, { Component } from 'react';
import './DetailedItem.css';

class DetailedItem extends Component {
    state = {
        num: [1, 2, 3, 4, 5, 6]
    }
    handleState = i => () => {
        const num = this.state.num;
        num[i] = num[i] + 1;
        this.setState({
            num
        });
    }
    render() {
        console.log(this.state.num);
        return (
            <div>
                Click to the number
                {
                    this.state.num.map((n, i) => (
                        <div key={n + 3*i} className="item-detail" onClick={this.handleState(i)}> {n} </div>
                    ))
                }
            </div>
        );
    }
}

export default DetailedItem;
// css
.item-detail {
    height: 50px;
    width: 50px;
    padding: 12px;
    border: 1px solid blue;
    margin: 10px;
    animation: animate 1s;
}
@keyframes animate {
    from {
        opacity: 0.5;
        transform: scale(1);
    }
    to {
        opacity: 1;
        transform: scale(2);
    }
}