{this.state.posts.map((item, index) => (
<Post
key={item.id}
dataID={item.id} // вы передаете id через пропс , все ок!
title={item.title}
content={item.body}
/>
))}
...
<div className="post-item__buttons buttons-block">
<button className="buttons-block__change"
onClick={this.modifyItem}
data-id={this.props.dataID} // убираем атрибут
>..</button>
<button className="buttons-block__delete"
onClick={this.deleteItem}
data-id={this.props.dataID} // убираем атрибут
>x</button>
</div>
...
...
modifyItem(e) {
// let target = e.target;
// let targetID = target.getAttribute('data-id');
// вместо этого просто напишите -> this.props.dataID
console.log(this.props.dataID, 'target id');
}
deleteItem(e) {
//let target = e.target;
//let targetID = target.getAttribute('data-id');
// тоже самое и здесь
fetch(`https://my-json-server.typicode.com/sergemin/render-list/posts/${this.props.dataID}`, {
method: 'DELETE'
})
.then(() => {
console.log(this.props.dataID);
})
.catch(error => console.log(error));
}
...
class Post extends React.Component {
constructor() {
super();
this.deleteItem = this.deleteItem.bind(this);
this.modifyItem = this.modifyItem.bind(this);
}
// ...
}