React updates state to all items that are mapped - reactjs

Question

React should be able to edit one item within the mapped array, however when selecting edit. It edits all of the items within the array. How would i be able to fix this so that i can edit for that specific post.id
For example
I'm not really sure how to tell react to edit a specific item, that is equivalent to the id.
PostList.js
import React, { Component } from 'react';
import Paper from '#material-ui/core/Paper';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import moment from 'moment';
import {connect} from 'react-redux';
import {DeletePost} from '../actions/';
import PostItem from './PostItem';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
}
}
class PostList extends Component{
constructor(props){
super(props);
this.state ={
isEditing:false
}
}
// Return a new function. Otherwise the DeletePost action will be dispatch each
// time the Component rerenders.
removePost = (id) => () => {
this.props.DeletePost(id);
}
onChange = (e) => {
e.preventDefault();
this.setState({
[e.target.title]: e.target.value
})
}
formEditing = (id) => ()=> {
if(this.state.isEditing){
this.setState({
isEditing: false
});
}
else{
this.setState({
isEditing:true
})
}
}
render(){
const {posts, editForm, isEditing, editChange} = this.props;
return (
<div>
{posts.map((post, i) => (
<Paper key={post.id} style={Styles.myPaper}>
<PostItem editForm={this.formEditing} isEditing={this.state.isEditing} removePost={this.removePost} {...post} />
</Paper>
))}
</div>
)
}
}
const mapDispatchToProps = (dispatch) => ({
// Pass id to the DeletePost functions.
DeletePost: (id) => dispatch(DeletePost(id))
});
export default connect(null, mapDispatchToProps)(PostList);
PostItem.js
import React, { Component } from 'react';
import Paper from '#material-ui/core/Paper';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import moment from 'moment';
import Editable from './Editable';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
}
}
const PostItem = ({ title, id, removePost, createdAt, post_content, username, editForm, isEditing, editChange}) => {
return(
<div>
<Typography variant="h6" component="h3">
{/* if else teneray operator */}
{/* when edit is clicked all items reveal an input field when it should just be the item that has */}
{isEditing ? (
<Editable editField={title} onChange={editChange}/>
): (
<div>
{title}
</div>
)}
</Typography>
<Typography component="p">
{post_content}
<h5>
by: {username}</h5>
<Typography color="textSecondary">{moment(createdAt).calendar()}</Typography>
</Typography>
{!isEditing ? (
<Button variant="outlined" type="submit" onClick={editForm(id)}>
Edit
</Button>
):(
<Button variant="outlined" type="submit" onClick={editForm(id)}>
Update
</Button>
)}
<Button
variant="outlined"
color="primary"
type="submit"
onClick={removePost(id)}>
Remove
</Button>
</div>
)
}
export default PostItem;

Answer 1

In PostList.js:
First setting your initial state to { isEditingId: null }.
You're not editing any post ids now :)
Change formEditing to something like this:
formEditing = (id) => ()=> {
this.setState({
isEditingId: id
});
}
This will always store a post's id to the isEditingId property (yes, I had to change isEditing to isEditingId to make it make sense)
When you're creating your PostItem mapping, instead of using isEditing={this.state.isEditing}, now check if post.id is equal to the post id stored in isEditingId with this: isEditing={this.state.isEditingId === post.id}.
This will make sure isEditing is still passed to PostItem.js as a boolean, indicating whether that post is being edited or not.
In PostItem.js:
You're already passing the post's id in editForm back to PostList when you click the "Edit" button, which is great.
Now change your onClick handler of your "Update" button to onClick={editForm(null)}.
With this change, you should now have isEditing equal to null in PostList.js, so you should see no Editable elements.
Hope this works for ya :) It was a bit hard to test since you didn't include your Editable file, but hopefully the explanation above helps at least get you on the right track.