[dmitry.suhotsky]

По нажанию на лайк, должен измениться цвет и увеличится кол-во на +1. Повторное нажание -1.

Компанент для вывода итемов

import React, { Component } from 'react';
export default class Items extends Component {
handleClick = () => {
  };

render() {
    return(
    <div className="items">
    {this.props.mass.map((i, index) => {
        return (
        <div className="item" key={index}>
            <div className="item__img">
                 <img src={i.img} alt="rose" /> 
            </div>
            <div className="item__text">
                <p className="item__title">{i.title}</p>
                <p className="item__hashtag">{i.hashtag}</p>
                <i className="fa fa-eye"></i><span className="item__viev">{i.viev}</span>
                <i className="fa fa-heart" onClick={this.handleClick({index})}></i><span className="item__like">{i.like}</span>
            </div>
        </div>
        )
    })}
    </div>
    );
}
}

Еще компонент, из которого я передаю значения

import React, { Component } from 'react';
import Background from '../img/cyprus-3184019_1920.jpg';
import Items from './Items';
import RoseImg from '../img/rose.jpg';
import LeafImg from '../img/leaf.jpg';

export default class Main extends Component {
    constructor(props){
        super();
        this.state = {
            mass : [{
                id: 1,
                img: RoseImg,
                title: '1Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 30,
                click: false
            },
            {
                id: 2,
                img: LeafImg,
                title: '2Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 20,
                click: false
            },
            {
                id: 3,
                img: RoseImg,
                title: '3Beautiful mint and glass bowl',
                hashtag: '#beauty #glass #mint #green #white #health',
                viev: 1130,
                like: 35,
                click: false
            }]
        }
    }
  render() {
    var sectionStyle = {
        width: "100%",
        height: "100%",
        backgroundImage: `url(${Background})`
      };
    return (
      <div className="main" style={ sectionStyle }>
        <div className="container">
            <h1>World’s most <span className="main__span">amazing</span> test tiles</h1>
            <Items mass={this.state.mass}/>
        </div>
      </div>
    );
  }
}

Как я думаю. По клику onClick={this.handleClick} вызывается функция, в которой ({{index}}) передается текущий итем.

1)берется текущий стейт
2) вытягиваем лайк
3) увеличиваем на 1
4) обновляем

handleClick = (i) => {
    const newMass = this.state.mass[i];
    newMass.like =  this.state.mass[i].like +1 ;
    this.setState({
        mass: newMass
    })
  };

Помогите разобраться