How to deal with event handlers for communication between components?

I have this structure

class App extends Component {
 constructor(props) {
super(props);
 this.state = {
 posts: [],
}
}
 render() {
 return (
 <div classname="App">
 {this.state.posts.map((item, index) => (
 <post key="{item.id}" dataid="{item.id}" title="{item.title}" content="{item.body}">
))}
</post></div>
);
}
}


Component post

class Post extends Component {
 modifyItem(e) {
 let target = e.target;
 let targetID = target.getAttribute('data-id');
 console.log(targetID, '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/${targetID}`, {
 method: 'DELETE'
})
 .then(() => {
console.log(targetID);
})
 .catch(error => console.log(error));
}
 render() {
 return (
 <article classname="post-list__item post-item">
 <div classname="post-item__inner">
 <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>
 <h3 classname="post-item__title">{this.props.title}</h3>
 <p classname="post-item__body">{this.props.content}</p>
</div>

</article>
)
}
}
Post.defaultProps = {
 title: PropTypes.string.isRequired,
 content: PropTypes.string
};


post is a component, it has two handlers for the two buttons on click. One for removal and one for editing.
But the thing is that if I have a processor inside a Post array with these posts lies in state in the App, how I can delete a single item from the state of another component? Well, I from the child component can transmit information about the changes?

At first I thought that the handler function should be put into the component App and

{this.state.posts.map((item, index) => (
 <post key="{item.id}" dataid="{item.id}" title="{item.title}" content="{item.body}">
 ))}</post>

Hang onclick and to work with him, and in the Post to pass through onclick props, but the thing is that inside the Post are two independent buttons that should be onclick

How to be?
June 10th 19 at 16:17
1 answer
June 10th 19 at 16:19
Solution
there are two options
<div classname="post-item__buttons buttons-block">
 <button classname="buttons-block__change" onclick="{this.props.onClickmodify}" data-id="{this.props.dataID}">
..
</button>
 <button classname="buttons-block__delete" onclick="{this.props.onClickdelete}" data-id="{this.props.dataID}">
x
</button>
</div>;

the second example

...
modifyItem(e) {
 let target = e.target;
 let targetID = target.getAttribute('data-id');
 console.log(targetID, 'target id');
this.props.modifyItemCallback(targetID);
}
 deleteItem(e) {
 let target = e.target;
 let targetID = target.getAttribute('data-id');
 fetch(`https://my-json-server.typicode.com/sergemin/render-list/posts/${targetID}`, {
 method: 'DELETE'
})
 .then(() => {
console.log(targetID);
this.props.deleteItemCallback(targetID)
})
 .catch(error => console.log(error));
}
...


<post key="{item.id}" dataid="{item.id}" title="{item.title}" content="{item.body}" modifyitemcallback="{(id)" => console.log(id)}
 deleteItemCallback={(id) => console.log(id)}
/>;</post>
Thank you. In General, I do the right approach? If I'm looking for a crutch now? You might want to change the structure of components? Or is it a good approach? - unique commented on June 10th 19 at 16:22
not not you basically do everything right - Jennyfer_Parisian64 commented on June 10th 19 at 16:25
you can rewrite the code
{this.state.posts.map((item, index) => (
 <post key="{item.id}" dataid="{item.id}" id you pass through props , everything is OK! title="{item.title}" content="{item.body}">
 ))}</post>

you can remove the data-id of button
...
<div classname="post-item__buttons buttons-block">
 <button classname="buttons-block__change" onclick="{this.modifyItem}" data-id="{this.props.dataID}" removed attribute>..</button>
 <button classname="buttons-block__delete" onclick="{this.deleteItem}" data-id="{this.props.dataID}" removed attribute>x</button>
</div>
...


...
modifyItem(e) {
 // let target = e.target;
 // let targetID = target.getAttribute('data-id');
 // instead just write> this.props.dataID
 console.log(this.props.dataID, 'target id');
}
 deleteItem(e) {
 //let target = e.target;
 //let targetID = target.getAttribute('data-id');
 // same thing here
 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));
}
...

don't forget the constructor
class Post extends React.Component {
 constructor() {
super();
 this.deleteItem = this.deleteItem.bind(this);
 this.modifyItem = this.modifyItem.bind(this);
}
 // ...
}
- Jennyfer_Parisian64 commented on June 10th 19 at 16:28
, thank you so much!! - unique commented on June 10th 19 at 16:31

Find more questions by tags React