Спасибо, нашел решение
Сам нашел
import React, { Component } from 'react';
export default class Items extends Component {
handleClick = index => {
index = index -1;
if (!this.props.mass[index].click) {
const list = this.props.mass; //клон mass array
var item = list[index]; // mass[item] кликнутый итем
item.like = item.like + 1; //меняем текушее значение на 1
item.click = !item.click;
list[index] = item; //обновляем клон
this.setState({
mass: list //обновляем state
});
}
}
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(i.id)}></i><span className="item__like">{i.like}</span>
</div>
</div>
)
})}
</div>
);
}
}
import React, { Component } from 'react';
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
},
{
id: 4,
img: RoseImg,
title: '1Beautiful mint and glass bowl',
hashtag: '#beauty #glass #mint #green #white #health',
viev: 1130,
like: 30,
click: false
},
{
id: 5,
img: LeafImg,
title: '2Beautiful mint and glass bowl',
hashtag: '#beauty #glass #mint #green #white #health',
viev: 1130,
like: 20,
click: false
},
{
id: 6,
img: RoseImg,
title: '1Beautiful mint and glass bowl',
hashtag: '#beauty #glass #mint #green #white #health',
viev: 1130,
like: 30,
click: false
},
{
id: 7,
img: LeafImg,
title: '2Beautiful mint and glass bowl',
hashtag: '#beauty #glass #mint #green #white #health',
viev: 1130,
like: 20,
click: false
}]
}
}
render() {
return (
<div className="main">
<div className="container">
<h1>World’s most <span className="main__span">amazing</span> test tiles</h1>
<Items mass={this.state.mass}/>
</div>
</div>
);
}
}
