Изменить значение в state массива

[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
    })
  };

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

[Nexus]

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[Nexus]

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

Передается не item, а его index.

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

У вас в state.mass должен находится массив объектов, а вы после обработки клика записываете в него объект, по которому кликнули.
Попробуйте так:

handleClick = index => {
    const list = this.state.mass;
    const item = list[index];

    item.like += item.click ? -1 : 1;
    item.click = !item.click;

    list[index] = item;

    this.setState({
        mass: list
    });
}

[SuperZen]

Nexus, в таком варианте handleClick изменения будут в самом this.state.mass, но поскольку вся фича реакта, не изменять текущий стейт напрямую, и, соответственно, это неправильно. Надо сначала сделать клон объекта, и в нем уже менять... а то не будут time travel )))

[Nexus]

SuperZen, вам виднее, я с реактом на Вы)
Правильно ли будет перенести данные из state в props?

[dmitry.suhotsky]

Подскажите тогда
при нажатии onClick={this.handleClick}
вызываю лог

export default class Items extends Component {
    handleClick = index => {
        console.log('Click');
    }

Все отрабатывает. Как по нажатию в лог вывести текущий like?

делаю так и вылетает ошибка

handleClick = index => {
         const list = this.props.mass; //клон mass array
         const item = list[index]; // mass[item] кликнутый итем
         item.like = 1; //меняем текушее значение на 1
         list[index] = item; //обновляем клон
         this.setState({
             mass: list  //обновляем state
         });
        console.log('Clock');
    }

Ошибка TypeError: Cannot set property 'like' of undefined

[Nexus]

dmitry.suhotsky, попробуйте классу Items добавить такой конструктор:

constructor(props){
    super(props);

    this.handleClick=this.handleClick.bind(this);
}

[SuperZen]

Nexus, из props в state если только для формы, которая требует валидации... лучше конечно разобраться с context, чтобы горадули не годарить )

dmitry.suhotsky, в первом посте

onClick={this.handleClick({index})}

заменить на

onClick={() => this.handleClick({i, index})}

только тогда, при каждом ререндерере будет пересоздаваться ф-ция, при больших объемах (сотни-тыщи) это будут влиять на производительность, а если штук 10-50, то можно забить... или если прям хочется идеалов, тогда надо осознать это https://reactjs.org/docs/optimizing-performance.html

[Nexus]

SuperZen,

из props в state

я про "наоборот" спрашивал, из state в props.

[SuperZen]

Nexus, ну тогда через пропсы должна быть передана ф-ция из родительского компонента, которая будет вызвана с дочерним стейт... в общем надо смотреть context, или redux, или mobx, или ) apolloGraphQL...